Angular 2 - итерация по массиву json внутри объекта json

Я изучаю Angular 2, и я работаю со статическими массивами, и теперь я пытаюсь узнать больше о чтении удаленных данных.

Мой 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')
      );
  }

}

Вот как мой URL-адрес API показывает результаты:

объект json с именем "docs".
массив json элементов с id и другими строками.

Моя цель - зациклировать каждый элемент массива и отобразить данные внутри него (id, placeID и т.д.)

Это мое приложение, которое не делает никакой итерации вообще:

Как я могу выполнить цикл с *ngFor каждым из элементов массива json?

Ответ 1