Afficher les événements Facebook avec angulaire

Question

Je souhaite afficher les événements sur mon site Web.

Je prends les événements de facebook avec ceci:

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()); 
} 

Après en 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); 

    } 
} 

Et j'utiliser cela pour afficher:

<ul> 
    <li> {{ events | json}}</li> 
</ul> 

Mais il me montre cela et je ne peux pas utiliser * 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" } 

Merci pour votre aide.

Answer 1

Je l'étape dans le JSON et extraire le tableau:

return this.http.get('the url')  
    .map(events => events.json().events.data); 
} 

Le code composante resterait le même, alors vous pouvez très bien itérer vos données:

<div *ngFor="let event of events"> 
    {{event.name}} 
</div> 

Si vous n'êtes pas voulez extraire uniquement le tableau, mais gardez votre code comme il est, alors vous avez besoin de itérer comme suit:

<div *ngFor="let event of events.events.data"> 
    {{event.name}} 
</div>