Displaying Nested Objects from JSON file in Angular2

Question

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.

I have a list that shows a JSON list of heroes: Basic List & Detail for Superman and Batman

My current goal is to show a list of accounts of the selected hero.

My problem is code here related to a list where I'd like to show accounts based on the hero chosen.

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.

hero-detail.component.html

<main class="col-sm-9">
    <div *ngIf="hero">
        <h2>{{hero.user[0].firstName}} {{ hero.user[0].lastName }}</h2>
        <div>
            <label>First Name: </label>
            <input [(ngModel)]="hero.user[0].firstName" placeholder="First Name">
        </div>
        <div>
            <label>Last Name: </label>
            <input [(ngModel)]="hero.user[0].lastName" placeholder="Last Name">
        </div>

        <ul class="list-group">
            <li class="list-group-item" *ngFor="let hero of heroes">
                <div *ngFor="let account of accounts">
                    {{ account[0].accountName }}
                </div>
            </li>
        </ul>
    </div>
</main>

hero-detail.component.ts

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;

}

hero-component.html

<aside class="col-sm-3">
<div class="list-group">
    <button class="list-group-item" 
        *ngFor="let hero of heroes" 
        [class.selected]="hero === selectedHero" 
        (click)="onSelect(hero)">
        {{ hero.user[0].firstName }} {{ hero.user[0].lastName }}
    </button>
</div>
</aside>

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

heroes.component.ts

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 => this.heroes = heroes);
    }

    ngOnInit(): void {
        this.getHeroes();
    }

    onSelect(hero: Hero): void {
        this.selectedHero = hero;
    }

}

mock-heroes.ts

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
            }
        ]
    }
]

Answer 1

You have to do like this:

<ul class="list-group">
   <li class="list-group-item" *ngFor="let hero of heroes">
       <div *ngFor="let account of hero.accounts">
          {{ account[0].accountName }}
       </div>
   </li>
</ul>

You have to use second *ngFor with hero.accounts, and make your template structure better, you are using hero in top div element, how you are getting that:

<div *ngIf="hero">

So check out first based on your requirement. Hope this help you.

Answer 2

This issue was solved using the Elvis operator (?.) from here: Angular2 ngFor Iterating over JSON

hero.ts

export class Hero {
    id: number;
    name: string;
    firstName: string;
    lastName: string;
    accounts: Array<Account>;
}

export interface Account {
    bank: string;
    type: string;
    balance: number;
}

heroes-detail.component.html

<main class="col-sm-9">
    <div *ngIf="hero">
        <h2>{{hero.firstName}} {{ hero.lastName }}</h2>
        <div>
            <label>id: </label>{{hero.id}}
        </div>
        <div>
            <label>First Name: </label>
            <input [(ngModel)]="hero.firstName" placeholder="First Name">
        </div>
        <div>
            <label>Last Name: </label>
            <input [(ngModel)]="hero.lastName" placeholder="Last Name">
        </div>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Bank Name</th>
                    <th>Account Type</th>
                    <th>Balance</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let account of hero?.accounts">
                    <td>{{ account.bank }}</td>
                    <td>{{ account.type }}</td>
                    <td>{{ account.balance }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</main>

mock-heroes.ts

import { Hero } from './hero';

export const HEROES: Hero[] = 
[
    {
        "id": 11, 
        "name": "Superman",
        "firstName": "Clark",
        "lastName": "Kent",
        "accounts": [
            {
                "bank": "Chase",
                "type": "Checking",
                "balance": 1000.00
            },
            {
                "bank": "Chase",
                "type": "Savings",
                "balance": 2000.00
            }
        ]
    },
    {
        "id": 12, 
        "name": "Batman",
        "firstName": "Bruce",
        "lastName": "Wayne",
        "accounts": [
            {
                "bank": "Bank of Gotham",
                "type": "Checking",
                "balance": 1000000000.00
            },
            {
                "bank": "Bank of Gotham",
                "type": "Savings",
                "balance": 2000000000.00
            }
        ]
    },
    {
        "id": 13, 
        "name": "Wonder Woman",
        "firstName": "Diana",
        "lastName": "Prince",
        "accounts": [
            {
                "bank": "",
                "type": "",
                "balance": 0.00
            },
            {
                "bank": "",
                "type": "",
                "balance": 0.00
            }
        ]
    }
]