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

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?

There are 2 options, your html snippet is not your actual code or the student array is not what you think it is. — ukn
– ukn, Commented Nov 14, 2022 at 1:20

Brandon Taylor · Accepted Answer · 2022-11-14 02:35:20Z

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

answered Nov 14, 2022 at 2:35

Brandon Taylor

34.7k16 gold badges109 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related