title: Angular: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays'
body: <p>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 :)</p>
  
  <p>This is my service:</p>
  
  <pre><code>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&lt;Afdelingen[]&gt; {
          return this.http.get(this.afdelingenUrl)
            .map(this.extractData)
            .catch(this.handleError);
        }
  
        private extractData(res: Response) {
          let body = &lt;Afdelingen[]&gt;res.json();
          return body || {};
        }
  
        private handleError(error: any): Promise&lt;any&gt; {
          console.error('An error occurred', error);
          return Promise.reject(error.message || error);
        }
  
        addAfdeling(afdelingsNaam: string, afdeling: any): Observable&lt;Afdelingen&gt; {
          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 =&gt; &lt;Afdelingen&gt; res.json())
            .catch(this.handleError)
        }
      }
  </code></pre>
  
  <p>This is part of my json file:</p>
  
  <pre><code>{
    "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
      }]}
  </code></pre>
  
  <p>The Component:</p>
  
  <pre><code>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 =&gt; {
            this.afdeling = data;
            console.log(this.afdeling);
          }, error =&gt; this.errorMessage = &lt;any&gt; error);
  
    }
  }
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let afd of afdeling"&gt;
      {{afd.patientid}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>