Angular *ngFor not reading nested data [duplicate]

Question

I am trying to get angular to display some data.

Here is the data:

data = [
   {
      title: 'title1',
      data: [
         {
            id: 1,
            description: 'some description'
         },
         {
            id: 2,
            description: 'some other description'
         }
      ]
   },
   {
      title: 'title2',
      data: [
         {
            id: 1,
            description: 'some description'
         },
         {
            id: 2,
            description: 'some other description'
         }
       ]
    }
 ]

And here is the code I'm trying:

<div *ngFor="let item of data">
   <div>{{ item.title }}</div>
   <ul>
      <li>item.data.description</li>
   </ul>
</div>

The data.description's are not showing.

How can I get it to display all the data?

akop · Accepted Answer · 2022-07-03 18:22:52Z

1

data is an array. You need a second *ngFor-block for the data.

  <div *ngFor="let item of data">
    <div>{{ item.title }}</div>
    <ul *ngFor="let itemsdata of item.data">
        <li>itemsdata.description</li>
    </ul>
  </div>

answered Jul 3, 2022 at 18:22

akop

8,1096 gold badges34 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

Angular *ngFor not reading nested data [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related