How to display data in table for nested json array - html

Question

This is my herolist json:
herolist = [{
sl: 1,
title: 'Batman',
gender: 'male',
firstname: 'Bruce',
lastname: 'Wayne',
city: 'Gotham',
ticketprice: 123.4567,
releasedate: '1/26/2018',
poster: 'assets/images/batman.jpg',
movieslist: [
{
title: 'Batman Begins',
poster: 'assets/images/bat1_tn.jpg'
}, {
title: 'Dark Knight',
poster: 'assets/images/bat2_tn.jpg'
}, {
title: 'Dark Knight Raises',
poster: 'assets/images/bat3_tn.jpg'
}
]
}
I have a nested array as movieslist. I need to display all those tiles inside movie list in the table.
I followed the below approach to display remaining items
<h1>Heroes List Application</h1>
<ul>
<li *ngFor="let hero of herolist">{{hero.title}}</li>
</ul>
<div class="table-responsive">
<table class="table table-striped table table-bordered table table-hover">
<thead class="thead-dark">
<tr>
<th>Sl #</th>
<th>Title</th>
<th>Full Name</th>
<th>Poster</th>
<th>City</th>
<th>Ticket Price</th>
<th>Release Date</th>
<th>Movies List</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hero of herolist">
<td>{{hero.sl}}</td>
<td>{{hero.title | titlecase }}</td>
<td>{{hero.firstname+' '+hero.lastname}}</td>
<td>
<img width="50" [src]="hero.poster" [alt]="hero.title">
</td>
<td>{{hero.city}}</td>
<td>{{hero.ticketprice | currency : 'INR': 'symbol': '3.2-3'}}</td>
<td>{{hero.releasedate | date }}</td>
**<td>
<span>{{ hero.movieslist.values()}}</span>
</td>**
</tr>
</tbody>
</table>
</div>
`
I need to display the movies list in the column. How should I use the ngFor as it is not the taking movieslist.

Answer 1

Use ngFor like this
<div *ngFor="let movie of hero.movieslist">{{ movie.title}}</div>
Full code
<h1>Heroes List Application</h1>
<ul>
<li *ngFor="let hero of herolist">{{hero.title}}</li>
</ul>
<div class="table-responsive">
<table class="table table-striped table table-bordered table table-hover">
<thead class="thead-dark">
<tr>
<th>Sl #</th>
<th>Title</th>
<th>Full Name</th>
<th>Poster</th>
<th>City</th>
<th>Ticket Price</th>
<th>Release Date</th>
<th>Movies List</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hero of herolist">
<td>{{hero.sl}}</td>
<td>{{hero.title | titlecase }}</td>
<td>{{hero.firstname+' '+hero.lastname}}</td>
<td>
<img width="50" [src]="hero.poster" [alt]="hero.title">
</td>
<td>{{hero.city}}</td>
<td>{{hero.ticketprice | currency : 'INR': 'symbol': '3.2-3'}}</td>
<td>{{hero.releasedate | date }}</td>
**<td>
<div *ngFor="let movie of hero.movieslist">{{ movie.title}}
<img src={{movie.poster}}/>
</div>
</td>**
</tr>
</tbody>
</table>
</div>