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

Question

I've created an angular app which gets data from a json file. But I'm having issues with showing the data in html. A lot of variables are in dutch, I'm sorry for that. I'm also a bit new to all of this :)

This is my service:

import {Injectable} from '@angular/core'; import {Http, RequestOptions, Response, Headers} from '@angular/http'; import {Observable} from "rxjs"; import {Afdelingen} from "./models";  @Injectable() export class AfdelingService {   private afdelingenUrl = '/assets/backend/afdelingen.json';     constructor(private http: Http) {       }        getAfdelingen(): Observable<Afdelingen[]> {         return this.http.get(this.afdelingenUrl)           .map(this.extractData)           .catch(this.handleError);       }        private extractData(res: Response) {         let body = <Afdelingen[]>res.json();         return body || {};       }        private handleError(error: any): Promise<any> {         console.error('An error occurred', error);         return Promise.reject(error.message || error);       }        addAfdeling(afdelingsNaam: string, afdeling: any): Observable<Afdelingen> {         let body = JSON.stringify({"afdelingsNaam": afdelingsNaam, afdeling: afdeling});         let headers = new Headers({'Content-Type': 'application/json'});         let options = new RequestOptions({headers: headers});         return this.http.post(this.afdelingenUrl, body, options)           .map(res => <Afdelingen> res.json())           .catch(this.handleError)       }     } 

This is part of my json file:

{   "afdelingen": [     {       "afdelingsNaam": "pediatrie",       "kamernummer": 3.054,       "patientid": 10001,       "patientennaam": "Joske Vermeulen",       "reden": "Appendicitis",       "opname": "12/05/2017",       "ontslag": "28/06/2017",       "behandelingstype": "nazorg",       "behandelingsomschrijving": "wondverzorging",       "behandelingsdatum": "10/06/2017",       "behandelingstijd": "10:20",       "vegitarisch": false,       "Opmerkingen": "",       "sanitair": true,       "kinderverzorgingsruimte": false,       "salon": true,       "hulp": true,       "width": 5,       "height": 5     },     {       "afdelingsNaam": "pediatrie",       "kamernummer": 3.055,       "patientid": 10002,       "patientennaam": "Agnes Vermeiren",       "reden": "Beenbreuk",       "opname": "18/05/2017",       "ontslag": "30/06/2017",       "behandelingstype": "nazorg",       "behandelingsomschrijving": "wondverzorging",       "behandelingsdatum": "10/06/2017",       "behandelingstijd": "10:20",       "vegitarisch": true,       "Opmerkingen": "",       "sanitair": true,       "kinderverzorgingsruimte": false,       "salon": true,       "hulp": false,       "width": 5,       "height": 5     }]} 

The Component:

import {Component, OnInit, Input} from '@angular/core'; import {Afdelingen} from "../models"; import {AfdelingService} from "../afdeling.service"; import {PatientService} from "../patient.service";   @Component({   selector: 'app-afdeling',   templateUrl: './afdeling.component.html',   styleUrls: ['./afdeling.component.css'] }) export class AfdelingComponent implements OnInit {   afdeling: Afdelingen[];  errorMessage:string;    constructor(private afdelingService: AfdelingService, private patientService: PatientService) { }    ngOnInit() {     this.getData()   }    getData() {     this.afdelingService.getAfdelingen()       .subscribe(         data => {           this.afdeling = data;           console.log(this.afdeling);         }, error => this.errorMessage = <any> error);    } } 

and the html:

<ul>   <li *ngFor="let afd of afdeling">     {{afd.patientid}}   </li> </ul> 

Answer 1

As the error messages stated, ngFor only supports Iterables such as Array, so you cannot use it for Object.

change

private extractData(res: Response) {   let body = <Afdelingen[]>res.json();   return body || {};       // here you are return an object } 

to

private extractData(res: Response) {   let body = <Afdelingen[]>res.json().afdelingen;    // return array from json file   return body || [];     // also return empty array if there is no data }