Angular 5 getting this error Cannot find a differ supporting object '[object Object]' of type 'object'

Question

Return object looks like this

data: { "23":
       { prop: abc, prop_2: def },
        "78":
       { prop: abc, prop_2: def },
       "2098":
       { prop: abc, prop_2: def },
      }

Code

<div *ngFor="let filterCar of data">
     // blah blah
  </div>

You are trying to iterate over JSON object, and not Array. You should transform your object to an array of objects if you want to use *ngFor. — dAxx_
– dAxx_, Commented Jul 12, 2018 at 11:49

Artory · Accepted Answer · 2018-07-12 12:21:51Z

1

You should transform your object into an array of object with Object.values :

let tab = Object.values(data);

And then you can iterate over it with ngFor

<div *ngFor="let filterCar of tab">
 // blah blah
</div>

answered Jul 12, 2018 at 12:21

Artory

8757 silver badges14 bronze badges

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

Comments

Volodymyr K · Accepted Answer · 2018-07-12 15:12:41Z

0

You can't call *ngFor on Object, just array, you should transform your object into an array of your object with Object.entries :

const arrayOfObject = Object.entries(data);

And then you can iterate over new variable with *ngFor

<div *ngFor="let item of arrayOfObject "></div>

MDN Object.entries()

edited Jul 12, 2018 at 15:12

answered Jul 12, 2018 at 12:26

Volodymyr K

1,25316 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular 5 getting this error Cannot find a differ supporting object '[object Object]' of type 'object'

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related