API-Antwort in Angular2 lesen & ionic

Question

Ich habe es erfolgreich geschafft, Daten von API mit http.get in Angular2 anzufordern. Das ist mein http.get

this.http.get('http://localhost:8001/v1/recent', { 
     headers: headers 
    }) 
    .map(res => res.text()) 
    .subscribe(
    data => console.log(data.total), 
    () => console.log('API request complete') 
); 

Die API auf Laravel basiert, wird es Daten zurück, als

{ 
    "total": 8, 
    "per_page": 50, 
    "current_page": 1, 
    "last_page": 1, 
    "next_page_url": null, 
    "prev_page_url": null, 
    "from": 1, 
    "to": 8, 
    "data": [ 
     { 
     "id": 1, 
     "name": "John Doe", 
     "author": { 
      "isBlocked": "0", 
     } 
     }, 
     { 
     "id": 1, 
     "name": "John Doe", 
     "author": { 
      "isBlocked": "0", 
     } 
     } 
    ] 
} 

folgt Wie kann ich das JSON-Objekt oben in Angular2 abrufen? und alles ist verschachtelt Array?

console.log(data.total) oben ist das Rück undefined

Answer 1

Die json in Ihrer Frage ist nicht korrekt formatiert, Sie haben ein zusätzliches Komma nach "isBlocked":"0" (in Zeile 15 und in Zeile 22)

"author": { 
    "isBlocked": "0", 
} 

, die wird es machen ein ungültiger JSON. Verhindern, dass Angular es korrekt analysiert.

Das andere Problem, Sie rufen .map(res => res.text()), die Ihren Antworttext in eine Zeichenfolge nicht ein Objekt konvertieren wird. Wenn Sie es als Javascript-Objekt möchten, tun Sie stattdessen .map(res => res.json()).

Here is a working plunker