Loop over nested array of objects

Question

I'm having a hard time trying to loop over an array of nested objects using ng7

this is the data I have:

data = { 
    'title1': [
    {
      active: true, 
      id: 1 
    },
  {
      active: true, 
      id: 2 
    },
  {
      active: true, 
      id: 3 
    },
  {
      active: true, 
      id: 4 
    }],
  'title2': [
   {
      active: true, 
      id: 1 
    },
  {
      active: true, 
      id: 2 
    },
  {
      active: true, 
      id: 3 
    },
  {
      active: true, 
      id: 4 
    }]              
}

I need to print the titles e.g. 'title1' and the rest of the data should be shown nested, issue is, whenever I go for this approach, everything looks ok:

 <ul>
    <li *ngFor="let item of data| keyvalue">
        <p>{{ item.key }}</p> 
        <p *ngFor="let children of item.value | keyvalue" >
            {{ children.value.id}}
        </p>
    </li>
  </ul>

But whenever I switch my layout to an input checkbox like this:

       <ul>
        <li *ngFor="let item of data| keyvalue">
            <p>{{ item.key }}</p> 
            <label>
                <input type="checkbox" name="events" *ngFor="let children of item.value | keyvalue" />
                event item {{ children.value.id}}
            </label>
        </li>
      </ul>

I get the following error on the browser's console, and nothing renders:

ERROR TypeError: Cannot read property 'value' of undefined at Object.eval [as updateRenderer] on

{{ item.key }}

Any idea? I'm sure I'm missing something dumb,

Sorry, I made a typo while writing down the data, there is it edited — DJ22T
– DJ22T, Commented Dec 4, 2018 at 2:40
It wasn't an array originally, but an object changed the first [ ] for curly braces — DJ22T
– DJ22T, Commented Dec 4, 2018 at 2:42
Possible duplicate of Angular 2 set and bind checkboxes with a ngFor — Randy Casburn
– Randy Casburn, Commented Dec 4, 2018 at 2:43
Yes, I saw the change you made to the data object, but I don't see any difference between your two code snippets at the bottom. They look identical to me. — Robby Cornelissen
– Robby Cornelissen, Commented Dec 4, 2018 at 2:46

Robby Cornelissen · Accepted Answer · 2018-12-04 03:01:50Z

3

Your children reference is not in scope when you reference it because the event item {{children.value.id}} string is not contained in the <input> element.

Define the loop on your <label> instead of your <input> element:

<ul>
  <li *ngFor="let item of data | keyvalue">
      <p>{{ item.key }}</p> 
      <label *ngFor="let children of item.value | keyvalue">
          <input type="checkbox" name="events" />
          event item {{children.value.id}}
      </label>
  </li>
</ul>

answered Dec 4, 2018 at 3:01

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

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

1 Comment

DJ22T Over a year ago

That was it, thanks a lot sir. Also thanks for throwing in the explanation.

Collectives™ on Stack Overflow

Loop over nested array of objects

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related