0
1.1K
ViewsHow to implement nested *ngFor in angular
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.
What am i doing wrong? Whats the correct way of printing
2 answers
Answer question0
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>
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>