title: Angular 2 - iterating over json array inside a json object
body: <p>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.</p>
  
  <p>My <code>app.component.ts</code>:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {Http, Response} from 'angular2/http';
  import {Observable} from 'rxjs/Rx';
  
  @Component({
    selector: 'my-app',
    template:`
    &lt;h1&gt;Angular2 HTTP Demo App&lt;/h1&gt;
    &lt;h2&gt;Foods&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li *ngFor="#doc of docs"&gt;{{doc.id}}&lt;/li&gt;
    &lt;/ul&gt;
    `
  })
  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) =&gt; res.json())
        .subscribe(
          data =&gt; { this.foods = data},
          err =&gt; console.error(err),
          () =&gt; console.log('done')
        );
    }
  
  }
  </code></pre>
  
  <p>This is how my API url show the results:</p>
  
  <p><a href="https://i.stack.imgur.com/LR8X4.png"><img src="https://i.stack.imgur.com/LR8X4.png" alt="API URL RESuLT"></a></p>
  
  <ol>
  <li>a json object named "docs".</li>
  <li>a json array of items with id's and other strings.</li>
  </ol>
  
  <p>My goal is to loop each array item and show the data inside it (id, placeID, etc..)</p>
  
  <p>This is my app, which makes no iteration at all:</p>
  
  <p><a href="https://i.stack.imgur.com/9VpS8.png"><img src="https://i.stack.imgur.com/9VpS8.png" alt="No iteration"></a></p>
  
  <p>How I can loop with the <code>*ngFor</code> each of ths json array items?</p>