web-dev-qa-db-fra.com

Angular 2 - itération sur un tableau json à l'intérieur d'un objet json

J'apprends Angular 2 et j'ai travaillé avec des tableaux statiques, et maintenant j'essaie d'en savoir plus sur la lecture de données distantes.

Ma app.component.ts:

import {Component} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'my-app',
  template:`
  <h1>Angular2 HTTP Demo App</h1>
  <h2>Foods</h2>
  <ul>
    <li *ngFor="#doc of docs">{{doc.id}}</li>
  </ul>
  `
})
export class AppComponent {

  public foods;
  public books;
  public movies;

  constructor(private http: Http) { }

  ngOnInit() {
    this.getFoods();
  }

  getFoods() {
    this.http.get('http://my API URL')
      .map((res:Response) => res.json())
      .subscribe(
        data => { this.foods = data},
        err => console.error(err),
        () => console.log('done')
      );
  }

}

Voici comment mon URL d'API affiche les résultats:

API URL RESuLT

  1. un objet json nommé "docs".
  2. un tableau json d'éléments avec des identifiants et d'autres chaînes.

Mon objectif est de boucler chaque élément du tableau et d'afficher les données qu'il contient (id, placeID, etc.)

Ceci est mon application, qui ne fait aucune itération du tout:

No iteration

Comment je peux boucler avec le *ngFor chacun de ces éléments du tableau json?

jsonangular
15
TheUnreal

Plunker

Pour faire une boucle sur Array: 

<li *ngFor="let doc of docs">{{doc.id}}</li>

Pour parcourir les propriétés de l'objet:

Vous devrez générer un Array des propriétés de l'objet

generateArray(obj){
   return Object.keys(obj).map((key)=>{ return obj[key]});
}

et l'utiliser comme

<li *ngFor="let doc of docs">
   <span *ngFor="let v of generateArray(doc)"> {{v}} </span>
</li>

Ou vous pouvez utiliser comme Pipe.

11
Ankit Singh