Angular 5 NgFor only supports binding to Iterables such as Arrays

Question

I am getting Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. error while I am trying to print all of my database records.

I have used this source to get the data from firebase. Somehow it does not work. Is my json file structure wrong or the type of the array should be different? What I am doing wrong?

firebase (json)

{
  "clients" : {
    "-L4jvQwBFM0W8A928waj" : {
      "id" : "124",
      "lastName" : "sda421",
      "name" : "412"
    },
    "-L4jz52GfcU4ZsJx_LX0" : {
      "id" : "214",
      "lastName" : "sda ",
      "name" : "sad "
    },
    "-L4k-5xNmN4dalqFj2dB" : {
      "id" : "12345678",
      "lastName" : "Pafasfbin",
      "name" : "fasf"
    },
    "-L4k-Dw5TA6FnHpWDiIq" : {
      "id" : "52353235",
      "lastName" : "qweqw",
      "name" : "qwrqwe "
    }
  }
}

clients.component.ts

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabase } from 'angularfire2/database' ;
import { Observable } from 'rxjs';


@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
  // clients: any[];
  clients: Observable<any[]>;

  name: string;
  lastName: string;
  id: number;

  constructor(public db: AngularFireDatabase) { }

  ngOnInit() {
    this.getData();
  }

  getData(){
    this.clients = this.db.list('/clients').valueChanges();
    console.log(this.clients);
  }
}

clients.component.html

<ul>
  <li *ngFor="let i of clients">
    <label>name: </label> {{ i.name }}
    <label>lastName: </label> {{ i.lastName }}
    <label>ID: </label> {{ i.id }}
    </li>
</ul>

You need to change `clients` to be a list, moving the hash to being a value in the object if necessary. — match, Feb 07 '18 at 13:57
Why on earth do you not retrieve the data as list ? https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md — Eliseo, Feb 07 '18 at 14:21
@Eliseo did everything almost the same as in the source that you provided. — bennn123, Feb 07 '18 at 14:35
@bennn123, take acount that the link you post is "Retrieving data as objects", the link I post is "Retrieving data as lists" — Eliseo, Feb 07 '18 at 17:16

Vivek Doshi · Accepted Answer · 2018-02-07T14:07:50.973

In Angular2+ ,

you can't loop through the json object via ngFor , value should be Iterables such as Arrays but in your case it's object , still if you want to loop through object you can do something like this as per your response

Component Side:

objectKeys = Object.keys;

Template Side :

<ul>
  <li *ngFor="let key of objectKeys(clients)">
    <label>name: </label> {{ clients[key].name }}
    <label>lastName: </label> {{ clients[key].lastName }}
    <label>ID: </label> {{ clients[key].id }}
    </li>
</ul>

WORKING DEMO

score 0 · Answer 2 · answered Feb 07 '18 at 14:03

Check out following code snippet.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  clients:any;
  data=`{
  "clients" : {
    "-L4jvQwBFM0W8A928waj" : {
      "id" : "124",
      "lastName" : "sda421",
      "name" : "412"
    },
    "-L4jz52GfcU4ZsJx_LX0" : {
      "id" : "214",
      "lastName" : "sda ",
      "name" : "sad "
    },
    "-L4k-5xNmN4dalqFj2dB" : {
      "id" : "12345678",
      "lastName" : "Pafasfbin",
      "name" : "fasf"
    },
    "-L4k-Dw5TA6FnHpWDiIq" : {
      "id" : "52353235",
      "lastName" : "qweqw",
      "name" : "qwrqwe "
    }
  }
}`
objectKeys;
 ngOnInit(){
    this.objectKeys = Object.keys;
   this.clients=JSON.parse(this.data).clients;
   console.log(this.clients);
 }

}

<ul>
  <li *ngFor="let i of objectKeys(clients)">

    <label>name: </label> {{ clients[i].name }}
    <label>lastName: </label> {{ clients[i].lastName }}
    <label>ID: </label> {{ clients[i].id }}
    </li>
</ul>

DEMO

Angular 5 NgFor only supports binding to Iterables such as Arrays

2 Answers2