Exploring the method of iterating through nested arrays in Angular

Question

Exploring the method of iterating through nested arrays in Angular

I have a nested array structured like this:

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"}]
],
// ...

My goal is to loop through the array and print the data while grouping students by subjects. Here's my attempt:

<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>

However, I encounter an error that says:

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

This error occurs during the second loop. Can anyone help me understand what I'm missing here?

angular typescript multidimensional-array

Answer 1

Answer №1

Recently modified the code by changing test[i] to test, which is now an array that can be iterated. Previously, test[i] was an object and could not be iterated.

Here is the TypeScript code snippet:

 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 here is the corresponding HTML code snippet:

<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>

Check out the live demo here.

Answer 2

Recently modified the code by changing test[i] to test, which is now an array that can be iterated. Previously, test[i] was an object and could not be iterated.

Here is the TypeScript code snippet:

 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 here is the corresponding HTML code snippet:

<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>

Check out the live demo here.

Answer 3

Answer №2

Here's how you can iterate through the given array:

<div *ngFor="let item of items">
  <ul *ngFor="let value of item">
     <li>{{value.name+' '+value.score}}</li>
  </ul>
</div>

Answer 4

Here's how you can iterate through the given array:

<div *ngFor="let item of items">
  <ul *ngFor="let value of item">
     <li>{{value.name+' '+value.score}}</li>
  </ul>
</div>

Answer 5

Answer №3

While I may not be an expert in Angular development, here is a suggestion:

Instead of using let student of test[i], consider changing it to let student of tests[i] or simply let student of test

Answer 6

While I may not be an expert in Angular development, here is a suggestion:

Instead of using let student of test[i], consider changing it to let student of tests[i] or simply let student of test

Answer 7

Answer №4

Give this a shot!

 let exams = [
              [{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 exam of exams">
    <ul *ngFor="let student of exam">
       <li>{{student.name+' '+student.score}}</li>
    </ul>
  </div>

Answer 8

Give this a shot!

 let exams = [
              [{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 exam of exams">
    <ul *ngFor="let student of exam">
       <li>{{student.name+' '+student.score}}</li>
    </ul>
  </div>

Exploring the method of iterating through nested arrays in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When setting up a list in TypeScript, it does not verify the type of each element during initialization

Sending reference variable from Angular input type=file

The positioning of the Zorro table column remains flexible despite the presence of nzLeft

Exploring the capabilities of observables in mapping nested dynamic object keys, specifically focusing on manipulating data within angular-calendar events

The Angular Library seems to be malfunctioning as it does not execute the ngOnInit

Encountering an issue with NgRx store where the property 'products' is not recognized on the type 'ActionCreatorProps<{ payload: Product[]; }>' while attempting to build a reducer

Sending emails with Angular 9: A step-by-step guide

What are some ways to customize formControlNames in Angular reactive forms?

How can I use Angular 4 typescript to deactivate a button based on the value of a boolean variable?

What events can cause all store states to be loaded when the page is altered?

Adjust the column width dynamically in an Ionic framework

The Angular 2 HTTP GET method is throwing a type 3 error when trying to access the

I'm looking for a way to merge the functionalities of tsc build watch and nodemon into a single Node.js

Development of backend applications using Node.js and Express, coupled with frontend interfaces built with Angular

What's the best way to invoke this specific TypeScript function?

Can we incorporate 'this' in the super() constructor?

Leveraging Typescript Generics for limiting the input parameter of a function

Implementing noData functionality in highcharts using angular

What could be causing TypeScript to forego type inference and default to 'any' in this scenario?

What causes items within an Array() to be interdependent? (Javascript)