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.

 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;}) } 

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

 [{"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"}] 

 [{"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: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. 

Answer 1

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)