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

Question

I am building an angular2 app which uses webapi for its data. App is having 3 dropdowns which are dependent on the previous value of the dropdown.
I am able to get the states data but when i select any of the states then it throws error.
Typescript

public states; public counties; public cities; sState={}; sCounty={}; sCity={}; 

initializeState() {
  this.zipcode.getStates() .subscribe(data=>{ this.states=data; }) 

setCountyValues(sState) { this.selectedCounties=this.service.getCounties(sState) .subscribe(data=>{
this.selectedCounties=data; }) 
}

 setCityValues(sCounty) {
    this.selectedCities = this.service.getCities(sCount)
    .subscribe(data=>{
    this.selectedcities=data;})
  }

HTML

<ion-item>
    <ion-label>State</ion-label>
    <ion-select (ionChange)="setCountyValues(sState.StateAbbr)" [(ngModel)]="sState" >
      <ion-option [value]="sState" *ngFor="let sState of states" [selected]="sState">{{sState.StateName}}</ion-option>
    </ion-select>
  </ion-item>

  
  <ion-item >
    <ion-label>Counties</ion-label>
    <ion-select (ionChange)="setCityValues(sCounty.County)" [(ngModel)]="sCounty">
      <ion-option [value]="sCounty" *ngFor="let sCounty of selectedCounties" [selected]="sCounty">{{sCounty.County}}</ion-option>
    </ion-select>
  </ion-item>
  <ion-item *ngIf="selectedCities">
    <ion-label>Cities</ion-label>
    <ion-select [(ngModel)]="sCity">
      <ion-option [value]="sCity" *ngFor="let sCity of selectedCities" [selected]="sCity">{{sCity.name}}</ion-option>
    </ion-select>
  </ion-item>

JSON Data(counties)

[{"Id":210,"PageRec":"AZ005","PageEx":"AZ005","PageGfe":"AZ005","State":"Arizona","County":"Apache","CountyFips":"04001","Juris":"Apache","RecName":"Apache County","JurisType":"County","StateAbbrv":"AZ","GfeName":"Apache County","StateFips":"4","OfficeCode":" ","OfficeNote":" ","C1":" ","SubJuris":" ","PageRecName":"AZ005:Apache County"},{"Id":211,"PageRec":"AZ006","PageEx":"AZ006","PageGfe":"AZ006","State":"Arizona","County":"Cochise","CountyFips":"04003","Juris":"Cochise","RecName":"Cochise County","JurisType":"County","StateAbbrv":"AZ","GfeName":"Cochise County","StateFips":"4","OfficeCode":" ","OfficeNote":" ","C1":" ","SubJuris":" ","PageRecName":"AZ006:Cochise County"},{"Id":212,"PageRec":"AZ007","PageEx":"AZ007","PageGfe":"AZ007","State":"Arizona","County":"Coconino","CountyFips":"04005","Juris":"Coconino","RecName":"Coconino County","JurisType":"County","StateAbbrv":"AZ","GfeName":"Coconino County","StateFips":"4","OfficeCode":" ","OfficeNote":" ","C1":" ","SubJuris":" ","PageRecName":"AZ007:Coconino County"},{"Id":213,"PageRec":"AZ008","PageEx":"AZ008","PageGfe":"AZ008","State":"Arizona","County":"Gila","CountyFips":"04007","Juris":"Gila","RecName":"Gila County","JurisType":"County","StateAbbrv":"AZ","GfeName":"Gila County","StateFips":"4","OfficeCode":" ","OfficeNote":" ","C1":" ","SubJuris":" ","PageRecName":"AZ008:Gila County"}]

JSON Data(states)

[{"StateID":2,"StateAbbr":"AL","StateName":"Alabama","IconFileName":null,"CreatedOn":null,"ModifiedOn":null,"NonState":0,"IsCanada":0},{"StateID":1,"StateAbbr":"AK","StateName":"Alaska","IconFileName":null,"CreatedOn":null,"ModifiedOn":null,"NonState":0,"IsCanada":0},{"StateID":4,"StateAbbr":"AZ","StateName":"Arizona","IconFileName":null,"CreatedOn":null,"ModifiedOn":null,"NonState":0,"IsCanada":0},{"StateID":3,"StateAbbr":"AR","StateName":"Arkansas","IconFileName":null,"CreatedOn":null,"ModifiedOn":null,"NonState":0,"IsCanada":0}]

ERROR

 Error:Cannot find a differ supporting object 'Response with status: 200 OK for URL: http://localhost:58682/home/GetCounties/?stateAbbr=AZ' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Zachary Rich Zachary Rich · Accepted Answer · 2017-06-27T13:50:13

The error mostly gives it away. You are trying to do an ngFor on an Object, not an array. You need to convert your objects to arrays. Try using JSON.parse(yourObjectHere)

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

1 Answers