"NgFor can only bind to Array objects - troubleshoot and resolve this error

Question

"NgFor can only bind to Array objects - troubleshoot and resolve this error

Recently, I've encountered a perplexing error that has left me stumped. Can anyone offer guidance on how to resolve this issue?

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

The JSON Array

[{

    "studentname": "ddd",
    "age": 10,
    "school": {
        "s_name": "abc school",
        "school_city": "nsw"
    }
}]

<div   *ngFor="let stu of this.studentSelected; let i = index;" >
   <tr > <td>{{stu.studentname}} :</td>
         <ng-container *ngFor="let sof stu .school">
              <td>{{s.school_city}}</td>
          </ng-container>
   </tr>
</div>

Although the error message specifies that NgFor only works with Arrays, I'm struggling to see how to fix this code.

javascript angular typescript

Answer 1

Answer №1

If you want to solve your issue, consider converting school into an array.

It seems that in your code, you are using ngFor on stu.school, which is not actually an array. You can fix this by modifying the following line:

studentSelected = [{
    "studentname": "ddd",
    "age": 10,
    "schools": [
      {
        "s_name": "abc school",
        "school_city": "nsw"
      }
    ]
}];

By making this change, your code should run without any errors:

<div *ngFor="let stu of studentSelected; let i=index;">
   <tr>
     <td>{{stu.studentname}} :</td>
         <ng-container *ngFor="let s of stu.schools">
              <td>{{s.school_city}}</td>
         </ng-container>
   </tr>
</div>

Here is a functional example:
https://stackblitz.com/edit/angular-ivy-ikeuky?file=src/app/app.component.ts

Please take a look and let me know if it resolves your issue :-)

Answer 2

If you want to solve your issue, consider converting school into an array.

It seems that in your code, you are using ngFor on stu.school, which is not actually an array. You can fix this by modifying the following line:

studentSelected = [{
    "studentname": "ddd",
    "age": 10,
    "schools": [
      {
        "s_name": "abc school",
        "school_city": "nsw"
      }
    ]
}];

By making this change, your code should run without any errors:

<div *ngFor="let stu of studentSelected; let i=index;">
   <tr>
     <td>{{stu.studentname}} :</td>
         <ng-container *ngFor="let s of stu.schools">
              <td>{{s.school_city}}</td>
         </ng-container>
   </tr>
</div>

Here is a functional example:
https://stackblitz.com/edit/angular-ivy-ikeuky?file=src/app/app.component.ts

Please take a look and let me know if it resolves your issue :-)

Answer 3

Answer №2

When looking at the information provided, it becomes clear that the school is categorized as an object rather than an array. This means there is no need to iterate over it in a loop. You can simply utilize it directly like so:

<div *ngFor="let stu of this.studentSelected; let i = index;">
  <tr>
    <td>{{stu.studentname}} :</td>
    <td>{{stu.school['school_city']}}</td>
  </tr>
</div>

To demonstrate and confirm this approach, I've crafted a StackBlitz example. It has been tested and proven effective. Please review for validation.

If by chance the school data is presented as an array structure, using ngFor will prevent encountering the aforementioned issues.

Answer 4

When looking at the information provided, it becomes clear that the school is categorized as an object rather than an array. This means there is no need to iterate over it in a loop. You can simply utilize it directly like so:

<div *ngFor="let stu of this.studentSelected; let i = index;">
  <tr>
    <td>{{stu.studentname}} :</td>
    <td>{{stu.school['school_city']}}</td>
  </tr>
</div>

To demonstrate and confirm this approach, I've crafted a StackBlitz example. It has been tested and proven effective. Please review for validation.

If by chance the school data is presented as an array structure, using ngFor will prevent encountering the aforementioned issues.

"NgFor can only bind to Array objects - troubleshoot and resolve this error

Answer №1

Answer №2

Similar questions

Chrome has some issues with resizing the SVG Pattern element

Choose the heading element based on its class

Modifying the content inside a div element and inserting an image into it

Vue: Ensuring one method finishes executing before triggering the next one

Insert a numerical value into a list to make a series of numbers whole

Choose a phrase that commences with the term "javascript"

Guide on using react-highlight-words to emphasize various keywords using different color schemes

Can native types in JavaScript have getters set on them?

When running npx webpack, an error occurred stating, "Property 'minify' cannot be read from undefined."

While making changes, I was anticipating a "for-of" loop to be used instead of a "for" loop

Sending a JavaScript function as part of an ajax response

ReactJs: Tweaking Padding in Material-UI Table

Navigating a path and executing unique functions based on varying URLs: A guide

Template for typed variable - `ng-template`

Analyzing two arrays and utilizing ng-style to highlight matching entries within the arrays

jQuery AJAX Triggered Only Once in Callback Function

Creating a OneToMany relationship in NestJS entity model

Passing a method as a parameter type

Transform a section of text into JSON format to utilize in DataTables

Exporting Javascript functions is not possible