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

Question

I have a component loading a local json file (contains only name) from assets folder.Since HttpClient takes care of formatting data as json, so didn't use map here.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'

 export type cont= {name: string};

@Component({
  selector: 'my-app',
  template: `
    1st List
    <ul>
      <li *ngFor="let contact of contacts | async">{{contact.name}}</li>
    </ul>
    2st List
    <ul>
      <li *ngFor="let contact of contacts2 | async">{{contact.name}}</li>
    </ul>
    `
})
export class AppComponent {;
  contacts: Observable<cont[]>;
  contacts2: Observable<cont[]>;
  constructor (http: HttpClient) {
    this.contacts = http.get<cont[]>('http://localhost:4200/assets/contacts.json');               
    setTimeout(() => this.contacts2 = this.contacts, 500);
  }
}

Contacts.json

 {
"items": [
  { "name": "Mark Twain" },
  { "name": "Sherlock Holmes" }
]

}

Data can be fetched on browser via http://localhost:4200/assets/contacts.json but When I tried to render the same via async pipe I get this error below.Tried many ways to convert observable to Observable<[]> but none passed this scenario. What's wrong here. how json data over httpclient can be converted to Array ? (tried to follow similar posts but none helped)?

At all costs avoid using setTimeout(), you will not be able to control how quickly the response will resolve and that is exactly why RxJS operators such as map() exist, even just to extract data from nested properties. — Alexander Staroselsky
– Alexander Staroselsky, Commented Jan 4, 2019 at 19:20
@AlexanderStaroselsky: Thanks. I also don't intend to use it. hands on stuff. — Jason
– Jason, Commented Jan 4, 2019 at 19:29

Andriy · Accepted Answer · 2019-01-06 12:34:28Z

7

You are trying to iterate over an object:

{
  "items": [
    { "name": "Mark Twain" },
    { "name": "Sherlock Holmes" }
  ]
}

You should iterate over contacts.items

<ul>
  <li *ngFor="let contact of (contacts | async)?.items">{{contact.name}}</li>
</ul>

or just use observable map:

const url = 'http://localhost:4200/assets/contacts.json';
this.contacts = http.get<cont[]>(url).pipe(map(data => data.items));

ANOTHER SOLUTION using Symbol.iterator

I am adding it just because it is interesting (in my opinion) approach although not practical in this case.

I can leave iteration over an asynchronous object:

<ul>
  <li *ngFor="let contact of contacts | async">{{contact.name}}</li>
</ul>

but I will convert this object to iterable by adding iterable protocol:

const url = 'http://localhost:4200/assets/contacts.json';
this.contacts = http.get<cont[]>(url).pipe(
  map((data: any) => {
    data[Symbol.iterator] = () => data.items[Symbol.iterator]();
    return data;
  })
);

The line

data[Symbol.iterator] = () => data.items[Symbol.iterator]()

redirects iteration over the object (which is impossible by default) to iteration over its items array.

I created a STACKBLITZ demonstrating this

edited Jan 6, 2019 at 12:34

answered Jan 4, 2019 at 19:14

Andriy

15.6k4 gold badges49 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jason Over a year ago

Thanks !!. Could you elaborate it a bit http.get<{[key:string]: cont[]}>(url).pipe(map(data => data.items)); please ?

Andriy Over a year ago

Since I did not see any interface or type for your object, I just said that the output of your get request will be an object with any string key ('items' in your case). But actually, after the map we will return an array only, so I will update my answer and return your original type

Jason Over a year ago

tried it out, data is being logged both ways and rendered too. but with let contact of (contacts | async).items">{{contact.name}}' I get **ERROR TypeError: Cannot read property 'items' of null`** at browser though data is rendered.

Andriy Over a year ago

just add safe null operator ? (angular.io/guide/…): <li *ngFor="let contact of (contacts | async)?.items">{{contact.name}}</li>. I updated my answer as well.

Andriy Over a year ago

I added additional solution using Symbol.iterator, Please check my updated answer

ankit chauhan · Accepted Answer · 2019-01-04 20:59:11Z

0

this will surely work just define varible correctly

this happens when data json you have in the variable is not in the array format.define variable like this

 contacts:[] and store the json from api like this:-
    response = http.get<cont[]>('http://localhost:4200/assets/contacts.json'); 
    this.contacts= response.items //array start from items key

    <ul>
      <li *ngFor="let contact of contacts">{{contact.name}}</li>
    </ul>

edited Jan 4, 2019 at 20:59

answered Jan 4, 2019 at 20:50

ankit chauhan

371 gold badge2 silver badges9 bronze badges

1 Comment

Andriy Over a year ago

response in your example will be an observable returned by http which does not have items property. Use rxjs's map function to accomplish this. Please see my answer above regarding map function

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related