title: Once Again NgFor only supports binding to Iterables such as Arrays
body: <p>As many before me, I have this error : </p>
  
  <pre><code>Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
  </code></pre>
  
  <p>I was trying many solutions like : 
  <a href="https://stackoverflow.com/questions/36839223/error-display-in-ngfor-json-array-object">error display in *ngfor json array object</a></p>
  
  <p>But nothing works. </p>
  
  <pre><code>  public getInterfaces(): Observable&lt;InterfaceBrief[]&gt; {
      let headers = this.createBasicHeaders();
      let options = new RequestOptions({
        method: 'get',
        headers: headers});
      let url = this.restApi +"/dashboard/list";
      console.log(url);
      return this.http.get(url, options)
        .map(this.extractData)
        .catch(this.handleError);
    }
  </code></pre>
  
  <hr>
  
  <pre><code>  private extractData(res: Response) {
  
      let body = res.json();
      console.log("GOOD");
      return body.data || {};
    }
  </code></pre>
  
  <hr>
  
  <pre><code>export class DashboardComponent implements OnInit {
  
    errorMessage: string;
    interfacesBrief: InterfaceBrief[];
  
    constructor(private _service: AuthService, private _emotService: EmotClientService) {
    }
    ngOnInit() {
      this.getInterfaces();
    }
    getInterfaces() {
      this._emotService.getInterfaces().subscribe(
  
        data =&gt; this.interfacesBrief = data,
        error =&gt; this.errorMessage = &lt;any&gt;error
      );
    }
  }
  </code></pre>
  
  <p>When I  changed:</p>
  
  <pre><code>    return body.data || {}; 
  </code></pre>
  
  <p>to : </p>
  
  <pre><code>return body.data.items || {};
  </code></pre>
  
  <p>I have error : </p>
  
  <pre><code>Cannot read property 'items' of undefined
  </code></pre>
  
  <p>ERR :Cannot read property 'data' of undefined</p>