Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 - iterating over json array inside a json object

Tags:

json

angular

I'm learning Angular 2 and I've been working with static arrays, and now I'm trying to learn more about reading remote data.

My 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')
      );
  }

}

This is how my API url show the results:

API URL RESuLT

  1. a json object named "docs".
  2. a json array of items with id's and other strings.

My goal is to loop each array item and show the data inside it (id, placeID, etc..)

This is my app, which makes no iteration at all:

No iteration

How I can loop with the *ngFor each of ths json array items?

like image 881
TheUnreal Avatar asked Mar 22 '16 18:03

TheUnreal


1 Answers

Plunker

To loop over Array:

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

To loop over Object Properties:

You will have to generate an Array of the object properties

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

and use it like

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

Or you can use as Pipe.

like image 91
Ankit Singh Avatar answered Oct 12 '22 08:10

Ankit Singh