How to map Angular 5 observable to a different format using map()

Question

I've been searching for a few days now for this issue. There's probably something quite obvious I'm missing out here but this stupid issue is making me quite agressive ;)

So here is my problem:

For a cross-platform app I'm making I use ionic with Angular 5. I want to have a calendar filled with meetings retrieved from an API. The json returned from the API has an array of meetings. Something like this:

{
    "meetings": [
        {
            "id": 851,
            "published": false,
            "title": "testtestestestestsetsetsetsetsettettt",
            "title_modified": 1527688927,
            etc...,
        },
            etc...
     ]
}

The problem is that the calendar needs a certain input to work. The input it needs is:

eventSource = {
      title: ...,
      startTime: ...,
      endTime: ...,
      allDay
}

Next I want to map json returned by the API to this $eventSource array. I worked my way through a lot of tutorials on how to do this with the observable returned by the Angular HttpCLient. And came up with the following:

private getMeetings(): void {
    this.apiCtrl.get('meetings/')
      .map((meetings) => {
        return meetings.map((meeting) => {
          return {
            title: meeting.title,
            startTime: meeting.start,
            endTime: meeting.endTime,
            allDay: false
          }
        })
      }).subscribe(
        meetings =>  {
          this.eventSource = meetings;
          console.log(this.eventSource);
        }
    )
}

But it returns me an error saying: meetings.map is not a functions

A little bit of browsing told me to add import { map } from 'rxjs/operators' or some other import. But no matter what I import it doesn't work. Some said I should use the pipe() method but this also doesn't work.

I hope someone out here is able to help me formatting this json data returned by an API to the format the eventSource variable needs to display meetings in a calendar

The ionic calendar i am using is: ionic2calendar( https://github.com/twinssbc/Ionic2-Calendar )

Answer 1

You need to print out meetings with the following line first.

console.log(meetings) 

Most likely meetings is not an array. You might have to do find a body or some other key inside the raw return.

Ok, should be meetings.meetings :)

Answer 2

You need return meetings.meetings. Well, change the variable to result

private getMeetings(): void {
    this.apiCtrl.get('meetings/')
      .map((result) => { //put result
        return result.meetings.map((meeting) => {  //return result.meetings transformed
          return {
            title: meeting.title,
            startTime: meeting.start,
            endTime: meeting.endTime,
            allDay: false
          }
        })
      }).subscribe(
        meetings =>  {
          this.eventSource = meetings;
          console.log(this.eventSource);
        }
    )
}

Answer 3

const respose$ = this.http.get(''); // some function returning Observable

return respose$.map(
        (obj) => {
          // Change Object here
          obj.val1 = ""
          obj.val2 = ""
        }
);

// Subscribe to this Observable finally