Iterate nested objects using ngFor

Question

I have JSON object:

content = 
[
{
   "id":1,
   "name":"test",
   "parent":{
      "name":"test2",
      "subParent":{
         "name":"test3",
         "subParent":{
            "name":"test4",
            "subParent":{
               "name":"test5",
               "subParent":null
            }
         }
      }
   }
}
]

How to iterate through each nested object and display the data in Angular?

I tried to do it with ngFor but it doesn't work

Could you show your .html please ?

Yohann Daniel Carter
– Yohann Daniel Carter

2022-12-20 15:31:38 +00:00
Commented Dec 20, 2022 at 15:31 — Yohann Daniel Carter
– Yohann Daniel Carter, Commented Dec 20, 2022 at 15:31

Yohann Daniel Carter · Accepted Answer · 2022-12-20 16:15:22Z

1

<ul>
  <li *ngFor="let data of content">
    {{data.id}}
    <ul>
      <li *ngFor="let p of data.parent">
        {{p.name}}
      </li>
    </ul>
  </li>
</ul>

You can try something like that, but recursive templates is for me, the right way to do that.

Regards,

edited Dec 20, 2022 at 16:15

answered Dec 20, 2022 at 15:47

Yohann Daniel Carter

1,00511 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Iterate nested objects using ngFor

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related