CODEWITHSUNDEEP
htmlangularngfor
Surya Rayaprolu
Surya Rayaprolu

Reputation: 5

How to display data in table for nested json array

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.

Upvotes: 0

Views: 177

Answers (1)

Arun Mohan
Arun Mohan

Reputation: 1227

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>

Upvotes: 1

Related Questions