Can't use ngFor

Question

I am trying to use ngFor loop to get data from my array. I get this

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

How can I fix it?

how i get data

if (this.resources$) {
  this.resources$.subscribe(result => {
    if (result)  {
      this.resourcesList = <Resources[]>result;

      this.showResources = true;
    }
  });



export interface Resources {
 Id: number;
 Name: string; 
}

I am trying to use it like that

<div *ngFor="let res of resourcesList">{{res.Name}}</div>

syntax looks correct. Please check the content of the resourceslist variable. set a breakpoint or display: {{ resourcesList | json }} — Marcel Hoekstra, Jun 07 '19 at 08:42
Maybe your resourcesList doesn't get set, because you never get into the wrapping if condition? Could you please try to log this? And by the way - You should be able to DOM subscribe with async pipe directly to your resources$ Observable: *ngFor="let res of resources$ | async". Using this you dont need anything of your .ts logic, just the resources$ observable. — Severin Klug, Jun 07 '19 at 08:43
Check what your backend is returning, make sure it's an array, not an object containing an array. — Ala Abid, Jun 07 '19 at 08:45

score 2 · Answer 1 · answered Jun 07 '19 at 08:40

2

you can use keyvalue pipe if you want to iterate over a object.

<div *ngFor="let res of resourcesList | keyvalue">
    {{res | json}}
</div>

answered Jun 07 '19 at 08:40

Yash Rami

2,276
1
10
16

1

I thinks it's a list – Ala Abid Jun 07 '19 at 08:42
It is work and display all values. When i am trying to gest res.Name do not. – Bartosz Stępak Jun 07 '19 at 08:52
can you show me your response. `{{res | json}}` what it will show? – Yash Rami Jun 07 '19 at 08:53
`keyvalue` pipe is convert your response in to `key` `value` pair – Yash Rami Jun 07 '19 at 08:54
you can get name by using this `{{res.value?.name}}` – Yash Rami Jun 07 '19 at 08:58
@BartoszStępak is it working ? – Yash Rami Jun 07 '19 at 09:02
@ala NVM but it is obj you can see in error :) – Yash Rami Jun 07 '19 at 09:03
@YashRami I added an answer, check it. He's doing what I actually thought he was doing in my comment to the question few minutes ago. – Ala Abid Jun 07 '19 at 09:22

score 1 · Answer 2 · answered Jun 07 '19 at 08:45

resourcesList must be an array.
Initialize resourcesList to an empty array i.e public resourcesList : any = []
make sure the response send by this.resources$.subscribe(...) is array of object
change <div *ngFor="let res of resourcesList">{{res?.Name}}</div>

score 1 · Accepted Answer · answered Jun 07 '19 at 09:19

According to your comment on another answer, your backend returns an object in this format:

{
  "ItemsCount": 1,
  "Resources": [
    {
      "Name": "Garaż wolnostojący 1",
      "DerivedFullName": "Garaż wolnostojący 1",
      "ParentId": 0,
      "IsLinkPossible": true,
      "Children": [],
      "Code": "",
      "Path": "Garaż wolnostojący 1",
      "Description": "",
      "Id": 186973
    }
  ]
}

Which is not an array, the array is in response.Resources, so doing this:

this.resourcesList = <ResourcesDetailsToIssueResponse[]>result.Resources;

will probably do the job for you.

Yes Thank you it is work – Bartosz Stępak Jun 07 '19 at 09:41 — Bartosz Stępak, Jun 07 '19 at 09:41

Can't use ngFor

3 Answers3