Use *ngFor for JSON object with nested arrays

Question

I I have a JSON object that has several levels of nest objects as well as nested arrays of objects. I would like to know how to use Angular2 and *ngFor to iterate through the object and end up with the listed printed out. The first *ngFor works but the next *ngFor give me and error saying Cannot read property nodes of undefined

Current HTML code

<div class="col-md-3">
               <div>
                    <ol>
                         <li *ngFor="let item of videoList" > {{item.title}} </li>
                         <ol>
                              <li *ngFor="let subItem of videoList.item.nodes"> {{subItem.title}} </li>
                         </ol>
                    </ol>
               </div>
         </div>

JSON object

  videoList =  [
          {
               'id':1,
               'title':'Lower Extremities',
               'nodes':[
                    {
                         'id':11,
                         'title':'Cast Receive',
                         'nodes':[
                                   {
                                   'id':111,
                                   'title':'Video 1',
                                   'nodes':[
                                             {
                                             'id':1111,
                                             'title':'Working',
                                             'nodes':[]
                                             },
                                             {
                                             'id':1112,
                                             'title':'Stacking',
                                             'nodes':[]
                                             },
                                        ]
                              },
                              {
                                   'id':112,
                                   'title':'Video 2',
                                   'nodes':[]
                              },
                              {
                                   'id':113,
                                   'title':'Video 3',
                                   'nodes':[]
                              }
                         ]
                    },
                     {
                         'id':12,
                         'title':'Cast Inspection',
                         'nodes':[
                              {
                                   'id':121,
                                   'title':'Video 1',
                                   'nodes':[]
                              },
                              {
                                   'id':122,
                                   'title':'Video 2',
                                   'nodes':[]
                              },
                              {
                                   'id':123,
                                   'title':'Video 3',
                                   'nodes':[]
                              }
                         ]
                    },
                     {
                         'id':13,
                         'title':'Cut & Set',
                         'nodes':[
                              {
                                   'id':131,
                                   'title':'Video 1',
                                   'nodes':[]
                              },
                              {
                                   'id':132,
                                   'title':'Video 2',
                                   'nodes':[]
                              },
                              {
                                   'id':133,
                                   'title':'Video 3',
                                   'nodes':[]
                              }
                         ]
                    }
               ]
          }

EDIT I attempted the given answer and all I recieved was a list of numbers 1, 2, and 3. Here is what I did.

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <ol>
           <li *ngFor="let item of videoList" > {{item.title}} </li>
           <ol>
                <li *ngFor="let subItem of item['nodes']" > {{subItem.title}} </li>
           </ol>
      </ol>
    `
})
export class AppComponent {

videoList = [
    {
      'id':1,
      'title':'Lower Extremities',
      'nodes': [
          {
            'id':11,
            'title':'Second node',
            'nodes': "[]"
          },
          {
            'id':12,
            'title':'Second node',
            'nodes': "[]"
          }
      ]
    },
    {
      'id':2,
      'title':'Second node',
      'nodes': []
    },
    {
      'id':3,
      'title':'third node',
      'nodes': []
    }
  ];
}

Your question inspired me to a solution to a big problem in my angular project thanks @Per Larsen! — Aaron Matthews
– Aaron Matthews, Commented Jun 28, 2019 at 11:02

null canvas · Accepted Answer · 2016-06-29 21:51:55Z

11

The second for loop should be

 <li *ngFor="let subItem of item['nodes']"> {{subItem.title}} </li>

answered Jun 29, 2016 at 21:51

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

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

2 Comments

Per Larsen Over a year ago

and would every subsequent for loop refer to the nodes attribute in the same way. For instance li *ngFor = "let subSubItem of subItem['nodes']"?

null canvas Over a year ago

Yes, it should, just follow the json tree

Per Larsen · Accepted Answer · 2016-06-30 12:15:13Z

11

The problem I was having was I was not nesting the successive <li> elements properly in the previous <li> tags. Here is how it should have been.

       <div>
            <ol>
                 <li *ngFor="let item of videoList" > 
                      <div>{{item.title}}</div> 
                      <ol>
                           <li *ngFor="let subItem of item.nodes"> 
                                <div>{{subItem.title}}</div> 
                           </li>
                      </ol>
                 </li>
            </ol>
       </div>

answered Jun 30, 2016 at 12:15

Per Larsen

1,1993 gold badges12 silver badges25 bronze badges

Comments

Daniel James · Accepted Answer · 2023-02-20 07:32:24Z

0

 <li *ngFor="let subItem of item['nodes']">

 {{subItem.title}} </li>

//Instead of item['nodes'] try item.nodes

 <li *ngFor="let subItem of item.nodes"> {{subItem.title}} </li>

//its perfectly working fine for me ! cheers !

edited Feb 20, 2023 at 7:32

answered Feb 20, 2023 at 7:27

Daniel James

11 bronze badge

Collectives™ on Stack Overflow

Use *ngFor for JSON object with nested arrays

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related