Angular 2 - iterating over json array inside a json object

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:

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:

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