Search code examples
jsonangularngfor

How to implement nested *ngFor in angular

I have json response which looks like below:

{
"hotel_name":"name",
"hotel_email":"[email protected]",
"contractList":[{
             "start_date": "2020-12-2",
             "end-date":"2020-12-10",
           }]
"roomsList":[{
            "type_name":"standard"

             },
             {
            "type_name":"premium"
             }]
}

I want to print this to the UI through angular. Therefore I used the following code.

<div class="content">
  <div fxLayout="row wrap " fxLayoutGap="50px grid">
    <div class="grid-container">
      <div *ngFor="let hotel of hotels; let i = index;">
  
        <mat-card class="example">
          <mat-card-title>{{ hotel.name }}</mat-card-title>
          <mat-card-subtitle>{{ hotel.address1 }}</mat-card-subtitle>

          <div *ngFor="let room of hotel[i].roomsList; let j = index ">
          <mat-card-content >
          
            <p>Room Details</p>
            
            <p style="color: darkcyan;">room[j].type_name</p> 
          </mat-card-content>
        </div>
        </mat-card>
      </div>
    </div>
  </div>
</div>

However, I am getting this error in the UI console. error What am i doing wrong? Whats the correct way of printing

Solution

  • Error happened you are trying to access the array element of the hotel (the hotel variable is not an array. It's an object). You can solve the issue by replacing hotel(object) with hotels(array) in second nested loop

    <div class="content">
  <div fxLayout="row wrap " fxLayoutGap="50px grid">
    <div class="grid-container">
      <div *ngFor="let hotel of hotels; let i = index;">
  
        <mat-card class="example">
          <mat-card-title>{{ hotel.name }}</mat-card-title>
          <mat-card-subtitle>{{ hotel.address1 }}</mat-card-subtitle>

          <div *ngFor="let room of hotels[i].roomsList; let j = index ">
          <mat-card-content >
          
            <p>Room Details</p>
            
            <p style="color: darkcyan;">room[j].type_name</p> 
          </mat-card-content>
        </div>
        </mat-card>
      </div>
    </div>
  </div>
</div>

    You can also use For-of-Loop for your requirement.

    <div class="content">
   <div fxLayout="row wrap " fxLayoutGap="50px grid">
      <div class="grid-container">
         <div *ngFor="let hotel of hotels">
            <mat-card class="example">
               <mat-card-title>{{ hotel.name }}</mat-card-title>
               <mat-card-subtitle>{{ hotel.address}}</mat-card-subtitle>
               <div *ngFor="let room of hotel.roomList">
                  <mat-card-content >
                     <p>Room Details</p>
                     <p style="color: darkcyan;">room.type_name</p>
                  </mat-card-content>
               </div>
            </mat-card>
         </div>
      </div>
   </div>
</div>