How to loop through nested arrays in Angular

Question

I've a nested array in this form

tests: [
  [{name:"Bob",score:40,subject:"Math"}, {name:"John",score:55,subject:"Math"}],
  [{name:"Alice",score:70,subject:"English"},{name:"John",score:68,subject:"English"}]
],
// ...

and I want to loop through and print while grouping the same subjects together as in:

<div *ngFor = "let test of tests;let i = index">
  <ul *ngFor = "let student of test[i] ;let n = index">
     <li>{{student.name+' '+student.score}}</li>
  </ul>
</div>

but it end up with the error:

ERROR Error: Cannot find a differ supporting object [object Object] of type 'object'. NgFor only supports binding to Iterables such as Arrays.

the starts from the second loop. what am I missing here, please?

Please provide the valid JSON

Prashant Pimpale
– Prashant Pimpale

2018-12-22 12:08:39 +00:00
Commented Dec 22, 2018 at 12:08 — Prashant Pimpale
– Prashant Pimpale, Commented Dec 22, 2018 at 12:08
Use Object.keys(<Item>)

Anees
– Anees

2018-12-22 12:18:45 +00:00
Commented Dec 22, 2018 at 12:18 — Anees
– Anees, Commented Dec 22, 2018 at 12:18

Lia · Accepted Answer · 2018-12-22 13:36:55Z

2

just changed test[i] to test that is an array and you can iterate it, but test[i] is and object and can't be iterate.

ts code:

 tests = [
          [{name:"Bob",score:40,subject:"Math"},{name:"John",score:55,subject:"Math"}],
          [{name:"Alice",score:70,subject:"English"},{name:"John",score:68,subject:"English"}]
        ]

html:

<div *ngFor = "let test of tests;let i = index">
    <ul *ngFor = "let student of test ;let n = index">
        <li>{{student.name+' '+student.score}}</li>
    </ul>
</div>

DEMO

edited Dec 22, 2018 at 13:36

answered Dec 22, 2018 at 12:12

Lia

12k3 gold badges36 silver badges53 bronze badges

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

2 Comments

yaxx Over a year ago

Thanks @Fateme that was quite handy. MashaAllah

brk Over a year ago

please explain what changes you did , also by ul got replaced with div

Poul Kruijt · Accepted Answer · 2018-12-22 12:12:27Z

1

If that's your array, you loop it like this:

<div *ngFor="let test of tests">
  <ul *ngFor="let student of test">
     <li>{{student.name+' '+student.score}}</li>
  </ul>
</div>

answered Dec 22, 2018 at 12:12

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Comments

Dhruv Raval · Accepted Answer · 2018-12-22 12:17:13Z

0

i'm not angular developer but try for loop :

change let student of test[i] to let student of tests[i] or let student of test

answered Dec 22, 2018 at 12:17

Dhruv Raval

1,5831 gold badge10 silver badges18 bronze badges

Comments

Praveen Kumar Tripathi · Accepted Answer · 2018-12-22 12:18:32Z

0

Try This

 let tests = [
              [{name:"Bob",score:40,subject:"Math"},{name:"John",score:55,subject:"Math"}],
              [{name:"Alice",score:70,subject:"English"},{name:"John",score:68,subject:"English"}]
            ];

<div *ngFor="let test of tests">
    <ul *ngFor="let student of test">
       <li>{{student.name+' '+student.score}}</li>
    </ul>
  </div>

answered Dec 22, 2018 at 12:18

Praveen Kumar Tripathi

2903 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to loop through nested arrays in Angular

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions