I am attempting to bind the data from a nested Json file provided below. Unfortunately, I am encountering an error that states: "Cannot find a differ supporting object '[object Object]' of type 'object'. ngFor only supports binding to Iterables such as Arrays." As a beginner, any guidance would be greatly appreciated.
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';
@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",
}
]
}
}