The error message "NgFor only supports binding to Iterables such as Arrays" is triggered even though the JSON response is formatted as an array

Question

The error message "NgFor only supports binding to Iterables such as Arrays" is triggered even though the JSON response is formatted as an array

Using TypeScript in CompanyComponent Class

export class CompanyComponent  {
  apiService : APIService;
  data : any;
  private companyUrl = 'http://localhost:4000/api/company/';

  constructor(apiService : APIService) {
    this.apiService = apiService;
    this.retrieveCompanies(this.companyUrl);
  }

  retrieveCompanies(url: any){
    this.data = this.apiService.GET(url).map((response :Response)=>
    response.json()).subscribe((response)=>{
    this.data = response;
    console.log(this.data);
  })
}

Array Response from Server

[
   {"_id":"58f61a132d44240d085ca2fa","comapny_name":"Burslem 
  Spice","__v":1,"categories":["58f643382d44240d085ca2fb"]},<br>
  {"_id":"590487964a45c56c0fa2911a","comapny_name":"Tiger 
  Bite","categories":[]}
]

HTML Template for Displaying Data

<div class="media">
  <div class="media-left" >
    <li class="media" *ngFor = "let comp of data" >
      <label>{{comp}}</label>
    </li>   
  </div>  
</div>

The server's response is an array, but I am encountering the following error:

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

https://i.sstatic.net/E9tOV.png

javascript angular typescript angular2-services

Answer 1

Answer №1

data : any; suggests that data can take on any value, but *ngFor only works with Iterables. To avoid issues, use array instead. Since data is loaded asynchronously, it may be undefined when the DOM first renders, causing Angular to throw an error.

 export class CompanyComponent  {
      apiService : APIService;
      data : Array; // or array
      private companyUrl = 'http://localhost:4000/api/company/';

constructor(apiService : APIService) {
        this.apiService = apiService;
        this.getCompanies(this.companyUrl);
        this.data = [];
}

getCompanies(url: any){
        this.apiService.GET(url).map((response :Response)=>
        response.json()).subscribe((response)=>{
            this.data = response;
            console.log(this.data);
        })
}

HTML

<div class="media">
  <div class="media-left" >
      <li class="media" *ngFor = "let comp of data" >
          <label> {{comp.company_name}}</label>
      </li>   
  </div>  
</div>

Answer 2

data : any; suggests that data can take on any value, but *ngFor only works with Iterables. To avoid issues, use array instead. Since data is loaded asynchronously, it may be undefined when the DOM first renders, causing Angular to throw an error.

 export class CompanyComponent  {
      apiService : APIService;
      data : Array; // or array
      private companyUrl = 'http://localhost:4000/api/company/';

constructor(apiService : APIService) {
        this.apiService = apiService;
        this.getCompanies(this.companyUrl);
        this.data = [];
}

getCompanies(url: any){
        this.apiService.GET(url).map((response :Response)=>
        response.json()).subscribe((response)=>{
            this.data = response;
            console.log(this.data);
        })
}

HTML

<div class="media">
  <div class="media-left" >
      <li class="media" *ngFor = "let comp of data" >
          <label> {{comp.company_name}}</label>
      </li>   
  </div>  
</div>

The error message "NgFor only supports binding to Iterables such as Arrays" is triggered even though the JSON response is formatted as an array

Answer №1

Similar questions

How to link AngularJS controller from a different module in routing

Unable to find solution for 'rxjs-compat/observable/combineLatest'

Retrieve the decimal separator and other locale details from the $locale service

Why isn't my computed property functioning properly in Vue.js?

Utilizing numerous X-axis data points in highcharts

Is there a way to refresh my order hook in React JS?

Information is not transferring to Bootstrap modal

Using Jquery to dynamically link a textbox with the onload event: A Guide

Utilizing the components within the range set by paper.setStart() and paper.setFinish() in Raphaels

Developing with Phonegap Build: A Guided Process

Instructions on sending an array of objects containing a file via ajax to an ASP.NET MVC controller

EaselJS - Utilizing multiple canvases with varying frame rates

A guide on cropping and uploading images using ejs and Node.JS

Having trouble getting the ReactJS AXIOS post function to work properly?

JavaScript encounters a parsing error when dealing with an async function

Having trouble aligning the canvas of threejs next to a div

Turning XSD into TypeScript code

unable to fetch information from OdooRPC

What is the best way to change the value of a div using JavaScript?

The AngularJS Factory $http encounters an error when attempting to read the property 'length' of an undefined value