CODEWITHSUNDEEP
htmlarraysjsonangularngfor
asdf
asdf

Reputation: 1

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

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 imageenter image description here

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 enter image description here

How can I do this in Angular?

Upvotes: 0

Views: 1126

Answers (1)

Brandon Taylor
Brandon Taylor

Reputation: 34553

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

Upvotes: 1

Related Questions