How to implement nested *ngFor in angular-CodePudding

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 >
  <div fxLayout="row wrap " fxLayoutGap="50px grid">
    <div >
      <div *ngFor="let hotel of hotels; let i = index;">
  
        <mat-card >
          <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. What am i doing wrong? Whats the correct way of printing

CodePudding user response：

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 >
  <div fxLayout="row wrap " fxLayoutGap="50px grid">
    <div >
      <div *ngFor="let hotel of hotels; let i = index;">
  
        <mat-card >
          <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 >
   <div fxLayout="row wrap " fxLayoutGap="50px grid">
      <div >
         <div *ngFor="let hotel of hotels">
            <mat-card >
               <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>

CodePudding user response：

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 >
  <div fxLayout="row wrap " fxLayoutGap="50px grid">
    <div >
      <div *ngFor="let hotel of hotels">
  
        <mat-card >
          <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>