Iterate over object and display it in table Angular (array in array) - html

Question

I have an api that returns this json.
Student = [
{"name": "Maha",
"age": "18",
"sibling": []
},
{"name": "Jensen",
"age": "19",
"sibling": [{"age": "22", "name": "JensenBrotherName"}]
},
{"name": "Matteo ",
"age": "19",
"sibling": [{"age": "27", "name": "MatteoBrotherName"}]
},
{"name": "Sumayya",
"age": "18",
"sibling": [{"age": "22", "name": "SumayyaBrotherName"}, {"age": "24", "name": "SumayyaBrotherName2"}]
},
{"name": "Caris",
"age": "18",
"sibling": [{"age": "22", "name": "CarisBrotherName"}, {"age": "24", "name": "CarisBrotherName2"}]
}
]
I am trying to display this data in a grid like this image
For the sibling column, I am trying to only display the names without age.
Things that I tried -
Student.sibling showed [object] [object]
And,
nested ngFor like
<div *ngFor ="let item of Student">
<div *ngFor ="let name of item.sibling">
{{name.name}}
</div>
</div>
and it displays all the siblings names for every student like
How can I do this in Angular?

Answer 1

The data provided won't produce the output you've specified.
I'm not sure what you mean by an "Angular" way of iterating through the data, but here's one example:
<table>
<caption>
Students
</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sibling</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>
<ng-container *ngFor="let sibling of student.sibling; let last = last">
{{ sibling.name }} ({{ sibling.age }})<ng-container *ngIf="!last"
>,
</ng-container>
</ng-container>
</td>
</tr>
</tbody>
</table>
Which produces the output visible in this Stackblitz