title: Angular2 *ngFor: "Cannot read property '0' of undefined"
body: <p>I trying to get data from a JSON file to build a form.</p>
  
  <p>Here is a portion of my template:</p>
  
  <pre><code>  &lt;div class="form-group"&gt;
      &lt;label for="power"&gt;Power&lt;/label&gt;
      &lt;select class="form-control" id="power" required&gt;
        &lt;option *ngFor="let p of heroes" [value]="p.level"&gt;{{p.level}}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is part of the remote JSON file:</p>
  
  <pre><code>{
      "data": [
          {
              "level": "newbie",
              "places": [
                  {
                      "place": "earth",
                      "categories": [
                          {
                              "category": "human",
                              "values": [
                                  ...
  </code></pre>
  
  <p>It works with no problem and i get <code>newbie</code> and other choices in the <code>select</code> menu.
  But i want to loop on places, so i edit the html template in this way:</p>
  
  <pre><code>  &lt;div class="form-group"&gt;
      &lt;label for="power"&gt;Power&lt;/label&gt;
      &lt;select class="form-control" id="power" required&gt;
        &lt;option *ngFor="let p of heroes[0].places" [value]="p.place"&gt;{{p.place}}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is the service that i use to grab data from JSON file:</p>
  
  <pre><code>@Injectable()
  export class HeroService {
      private url = 'app/mockups/heroes.json';
  
      constructor(private http: Http) { }
  
      getHeroes(): Promise&lt;Hero[]&gt; {
          return this.http.get(this.url)
              .toPromise()
              .then(response =&gt; response.json().data as Hero[])
              .catch();
      }
  }
  </code></pre>
  
  <p>and here is the <code>hero.component</code>:</p>
  
  <pre><code>export class HeroComponent implements OnInit {
      heroes: Hero[];
  
      constructor(private heroService: HeroService) { }
  
      ngOnInit():void {
          this.getHeroes();
  }
  
      getHeroes(): void {
          this.heroService.getHeroes().then(heroes =&gt; this.heroes = heroes);
    }
  </code></pre>
  
  <p>But i get <strong>"Cannot read property '0' of undefined"</strong> error.</p>
  
  <p>Why?</p>