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

Question

I am trying to bind the data which is a nested Json file that I included below. However, I get this error. I am a beginner so any help would be much appreciated.

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

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestProvider } from './../../providers/rest/rest';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
   weapons: any;
   errorMessage: string;
  constructor(public navCtrl: NavController, public rest: RestProvider) {

 }
 ionViewDidLoad() {
  this.getweapons();
}
 getweapons() {
   this.rest.getweapons()
      .subscribe(
        weapons => this.weapons = weapons,
        error =>  this.errorMessage = <any>error);
 }

  }

HTML

  <ion-content padding>
    <ion-list>
      <ion-item *ngFor="let c of weapons">
        <h2>{{c.weapon_category.weapons[0].name}}</h2>
      </ion-item>
    </ion-list>
  </ion-content>

Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';
// import 'rxjs/add/operator/catch';
// import 'rxjs/add/operator/map';
@Injectable()
export class RestProvider {
  baseUrl:string = "http://localhost:3000";
  constructor(private httpClient : HttpClient) {
  }

  public getweapons(): Observable<{}> {
    return this.httpClient
      .get(this.baseUrl + '/categories')
      .pipe(
          map(this.extractData),
          catchError(this.handleError)
        );
      }

      private extractData(res: Response) {
        let body = res;
        return body || { };
      }

      private handleError (error: Response | any) {
        let errMsg: string;
        if (error instanceof Response) {
          const err = error || '';
          errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
          errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
      }

}

Json

{
  "weapon_category": {
    "weapons": [
        {
          "name": "AK",
        }
      ]
    }
}

Swap weapons => this.weapons = weapons to weapons => {console.log(weapons);this.weapons = weapons} and tell us the output. — Z. Bagley
Problem with extractData method. Seems like it's not return array, I assume body || {} means you are expecting object. ngFor only support array. That's why you got this error. To further solve this, please provide your weapons data. — Chybie

Sajeetharan Sajeetharan · Accepted Answer · 2018-01-22T18:02:09

weapons is an object, hence you are getting this obvious error Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

To fix, you need to access weapons.weapon_category.weapons in order to get an array

change your template as

 <ion-item *ngFor="let c of weapons?.weapon_category?.weapons">
        <h2>{{c.name}}</h2>
 </ion-item>

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

1 Answers