How to loop on array coming from asynchronous call to remote JSON file?
<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.</p>

<p>Now i want to loop on <code>places</code>, 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>As you can see i used <code>heroes[0].places</code> instead of <code>heroes</code> to enter the <code>places</code> array that is a property of the first item in <code>heroes</code> array.</p>

<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;Array&lt;Object&gt;&gt; {
        return this.http.get(this.url)
            .toPromise()
            .then(response =&gt; response.json().data as Array&lt;Object&gt;)
            .catch();
    }
}
</code></pre>

<p>and here is the <code>hero.component</code>:</p>

<pre><code>export class HeroComponent implements OnInit {
    heroes: Array&lt;Object&gt;;

    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>I think this happens because i'm fetching data by asynchronous way and when Angular tries to resolve bindings the first time data is still null therefore heroes[0] fails. For this reasons I even tried to add the <code>Elvis operator</code> in the loop (<code>let p of heroes[0]?.places</code>), but i get the same error.
So, how to loop on array that contains data that is coming from asynchronous call?</p>