How to implement nested *ngFor in angular

user_16647954 0
Viewed 244

I have json response which looks like below:

{
"hotel_name":"name",
"hotel_email":"hotel@gmail.com",
"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

ngfor angular json
2 Answers

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>
user_102984510

Regarding your example json, your code seems wrong.

Replace let room of hotel[i].roomsList with let room of hotel.roomsList
And room[j].type_name with room.type_name In your case you don't need to use counter var like, i or j.

Your code should be like:

<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.address1 }}</mat-card-subtitle>

          <div *ngFor="let room of hotel.roomsList">
          <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>
user_28385860
Related