How to implement nested *ngFor in angular

Question

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. What am i doing wrong? Whats the correct way of printing

Chamikara Samarasekara · Accepted Answer · 2021-12-13 10:26:33Z

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>

ZecKa · Accepted Answer · 2021-12-13 12:34:27Z

0

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>

edited Dec 13, 2021 at 12:34

answered Dec 13, 2021 at 8:10

ZecKa

2,9974 gold badges29 silver badges46 bronze badges

I did try this now, but it was generating an error saying "The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Type 'Object' is not assignable to type 'any[]'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?"
– Nikita Fernando
Commented Dec 13, 2021 at 9:35
Because your json example should be into an array, instead of directly put an object. Can you please reproduce your issue on stackblitz.com or codesandbox.io ?
– ZecKa
Commented Dec 13, 2021 at 10:11
Why there is I,J parameter is your code without using it. Identify bug first and post reply without providing alternative code with broken variables. It is good to post alternative way but post solution as well. So many developers reading these articles.
– Chamikara Samarasekara
Commented Dec 13, 2021 at 10:24
1

@ChamikaraSamarasekara. Yes you right, i and j is not needed (I edit answer), but this is not brokens variable it's unused variables... And this is not an alternative solution because on the code provided i and j is only use to get value in child, so it's cleaner and more understandable to simply remove it and use "hotel" variable
– ZecKa
Commented Dec 13, 2021 at 12:37

Add a comment |

Collectives™ on Stack Overflow

How to implement nested *ngFor in angular

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related