title: Displaying Nested Objects from JSON file in Angular2
body: <p>Learning how to display nested data using Angular 2.  There are lots of similar questions on the web but I haven't seen anything broken down into a simple object I can follow and repeat.</p>
  
  <p>I have a list that shows a JSON list of heroes:
  <a href="https://i.stack.imgur.com/lfqUd.png" rel="nofollow noreferrer">Basic List &amp; Detail for Superman and Batman</a></p>
  
  <p><strong>My current goal is to show a list of accounts of the selected hero.</strong></p>
  
  <p>My problem is code here related to a list where I'd like to show accounts based on the hero chosen.</p>
  
  <p>My JSON is broken where I can see sub-nested detail but I can't seem to get that level of detail into a list.</p>
  
  <p>hero-detail.component.html</p>
  
  <pre><code>&lt;main class="col-sm-9"&gt;
      &lt;div *ngIf="hero"&gt;
          &lt;h2&gt;{{hero.user[0].firstName}} {{ hero.user[0].lastName }}&lt;/h2&gt;
          &lt;div&gt;
              &lt;label&gt;First Name: &lt;/label&gt;
              &lt;input [(ngModel)]="hero.user[0].firstName" placeholder="First Name"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label&gt;Last Name: &lt;/label&gt;
              &lt;input [(ngModel)]="hero.user[0].lastName" placeholder="Last Name"&gt;
          &lt;/div&gt;
  
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item" *ngFor="let hero of heroes"&gt;
                  &lt;div *ngFor="let account of accounts"&gt;
                      {{ account[0].accountName }}
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>hero-detail.component.ts</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { Hero } from './hero';
  
  @Component({
      selector: 'my-hero-detail',
      templateUrl: './heroes-detail.component.html'
  })
  export class HeroesDetailComponent {
  
      @Input()
      hero: Hero;
  
  }
  </code></pre>
  
  <p>hero-component.html</p>
  
  <pre><code>&lt;aside class="col-sm-3"&gt;
  &lt;div class="list-group"&gt;
      &lt;button class="list-group-item" 
          *ngFor="let hero of heroes" 
          [class.selected]="hero === selectedHero" 
          (click)="onSelect(hero)"&gt;
          {{ hero.user[0].firstName }} {{ hero.user[0].lastName }}
      &lt;/button&gt;
  &lt;/div&gt;
  &lt;/aside&gt;
  
  &lt;my-hero-detail [hero]="selectedHero"&gt;&lt;/my-hero-detail&gt;
  </code></pre>
  
  <p>heroes.component.ts</p>
  
  <pre><code>import { Component, OnInit }    from '@angular/core';
  
  import { Hero }             from './hero';
  import { HeroService }      from './hero.service';
  
  @Component({
      selector: 'app-heroes',
      templateUrl: './heroes.component.html',
      providers: [ HeroService ]
  })
  export class HeroesComponent implements OnInit {
      title = 'Tour of Heroes';
  
      heroes: Hero[];
      selectedHero: Hero;
  
      constructor(
          private heroService: HeroService) { }
  
      getHeroes(): void {
          this.heroService
              .getHeroes()
              .then(heroes =&gt; this.heroes = heroes);
      }
  
      ngOnInit(): void {
          this.getHeroes();
      }
  
      onSelect(hero: Hero): void {
          this.selectedHero = hero;
      }
  
  }
  </code></pre>
  
  <p>mock-heroes.ts</p>
  
  <pre><code>import { Hero } from './hero';
  
  export const HEROES: Hero[] = 
  [
      {
          "heroId": 1001,
          "alias": "Superman",
          "user": [
              {
                  "firstName": "Clark",
                  "lastName": "Kent",
                  "email": "clark.kent@dailyplanet.com"
              }
          ],
          "accounts": [
              {
                  accountNum: "1234567890",
                  accountName: "Personal Checking",
                  type: "checking",
                  balance: 1500.00
              },
              {
                  accountNum: "2345678901",
                  accountName: "Personal Savings",
                  type: "savings",
                  balance: 2000.00
              }
          ]
      },
      {
          "heroId": 1002,
          "alias": "Batman",
          "user": [
              {
                  "firstName": "Bruce",
                  "lastName": "Wayne",
                  "email": "bruce.wayne@wayne.com"
              }
          ],
          "accounts": [
              {
                  accountNum: "1234567890",
                  accountName: "Personal Checking",
                  type: "checking",
                  balance: 7500000.00
              },
              {
                  accountNum: "2345678901",
                  accountName: "Personal Savings",
                  type: "savings",
                  balance: 20000000.00
              }
          ]
      }
  ]
  </code></pre>