Show Facebook events with angular - facebook

Question

I want to display events on my website.
I take events from facebook with this :
infos.service.ts :
getEvents(link: string): Observable<any>{
let id = link.split('facebook.com/')[1].split('?')[0];
console.log("id ------> ",id);
return this.http.get(`https://graph.facebook.com/${id}?fields=events{name}&access_token=`)
.map(events => events.json());
}
After in home.component.ts :
onChange(e: Event) {
let value = e.target['value'];
this.service.getEvents(value).subscribe(event => {
console.log('events: ', event);
})
this.service.getEvents(value).subscribe((data) => this.events=data);
}
}
And I use this in order to display :
<ul>
<li> {{ events | json}}</li>
</ul>
But it shows me that and I can't use *ngFor :
"events": { "data": [ { "name": "Qui veut partir à Ibiza avec la team Coke TV cet été ?", "id": "1039032149505674" }, { "name": "MoveMyCity #MoveLyon", "id": "891490744279264" }, { "name": "MoveMyCity #MoveToulouse", "id": "816021265181647" }, { "name": "MoveMyCity #MoveMontpellier", "id": "801781889934749" }, { "name": "MoveMyCity #MoveMarseille", "id": "1610198129252793" }, { "name": "MoveMyCity #MoveNantes", "id": "936652956376199" }, { "name": "MoveMyCity #MoveParis", "id": "1609074386008334" } ], "paging": { "cursors": { "before": "QVFIUmdUc21tQW80b0tzLVgtc3VtUHI5OFNxdlZAMaVUwZAW02R1JvbGs4ZAUVwTUpmbUNiSVJ5eTBHVXMwSkw4RkFQQWNzZA3o1eTgzN2hxUFVINnlzd1ZA1eE93", "after": "QVFIUjgtRUUwR29ud25QdlE2YmVhQ3BfZAXdsd1R2SDlqeWlaeEk5empwVlBWQ1VkOXFtUkF2VUVPQlhvMWlLaHdNZA2VXczBuQkpyc0o1V2dNQUdZAYjllVE1B" } } }, "id": "998589190158511" }
Thanks for ur help.

Answer 1

I would step into the JSON and extract the array:
return this.http.get('the url')
.map(events => events.json().events.data);
}
The component code would stay the same, then you can very well iterate your data:
<div *ngFor="let event of events">
{{event.name}}
</div>
If you do not want to extract only the array, but keep your code like it is, then you need to iterate like so:
<div *ngFor="let event of events.events.data">
{{event.name}}
</div>