title: How to loop through nested arrays in Angular
body: <p>I've a nested array in this form</p>
  
  <pre><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"}]
  ],
  // ...
  </code></pre>
  
  <p>and I want to loop through and print while grouping the same subjects together as in:</p>
  
  <pre><code>&lt;div *ngFor = "let test of tests;let i = index"&gt;
    &lt;ul *ngFor = "let student of test[i] ;let n = index"&gt;
       &lt;li&gt;{{student.name+' '+student.score}}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but it end up with the error:</p>
  
  <blockquote>
    <p>ERROR Error: Cannot find a differ supporting object <code>[object Object]</code> of type 'object'. NgFor only supports binding to Iterables such as Arrays.</p>
  </blockquote>
  
  <p>the starts from the second loop. what am I missing here, please?</p>