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

Question

i want to render the list of users using the ngFor directive, but when i try to do this console is showing the error that.

Error

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

Group-component.ts

groupUsers: any[] = [];

this.groupService.getGroupUsers(this.groupId)
  .subscribe(groupUsers => {
    this.groupUsers = groupUsers;
  });

Group-service.ts

getGroupUsers(groupId: number): Observable<any[]> {
      return this.http.get<any[]>(this.baseUrl + 'GroupAttendance/GroupUsers/' + groupId);
}

Group-component.html

<div *ngFor="let user of groupUsers" class="modal-body">
  <div class="card">
   <div class="card-body">
    <div class="form-group">
      <p>{{ user.user.knownAs }}</p>
    </div>
  </div>
</div>

Here is the response getting the data from the server

I don't know why console show me this error

Did you check if you're getting any data from request?

Sachin Parashar
– Sachin Parashar

2020-02-19 12:57:00 +00:00
Commented Feb 19, 2020 at 12:57 — Sachin Parashar
– Sachin Parashar, Commented Feb 19, 2020 at 12:57
yes, data is in array format

Malik Haseeb
– Malik Haseeb

2020-02-19 17:38:48 +00:00
Commented Feb 19, 2020 at 17:38 — Malik Haseeb
– Malik Haseeb, Commented Feb 19, 2020 at 17:38

Usama · Accepted Answer · 2021-09-21 17:50:47Z

1

In your group.component.html

   <div *ngIf="groupUsers?.length > 0">
    <div *ngFor="let user of groupUsers" class="modal-body">
      <div class="card">
       <div class="card-body">
        <div class="form-group">
          <p>{{ user.user.knownAs }}</p>
        </div>
      </div>
    </div>
   </div>

answered Sep 21, 2021 at 17:50

Usama

1405 bronze badges

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

1 Comment

Shurvir Mori Over a year ago

Hope this will help... stackoverflow.com/a/51286078/5114465

Ahmad Sharif · Accepted Answer · 2020-06-19 10:02:47Z

1

Try this. Actually data of array is not ready to serve in html. That's why it is throwing this error. Before showing the data in html file, make sure it is ready to render. You can check it by the following way.

*ngIf="groupUsers?.length > 0" // Check that groupUsers have data and its contains data

.

<div *ngIf="groupUsers?.length > 0">

    <div *ngFor="let user of groupUsers" class="modal-body">
      <div class="card">
       <div class="card-body">
        <div class="form-group">
          <p>{{ user.user.knownAs }}</p>
        </div>
      </div>
    </div>
</div>

answered Jun 19, 2020 at 10:02

Ahmad Sharif

4,4536 gold badges40 silver badges51 bronze badges

Comments

Fahd Lihidheb · Accepted Answer · 2020-02-19 16:53:39Z

0

It seems that groupUsers is not an array. check again your response type.

Did you try to console.log(groupUsers) in your subscribe ?

answered Feb 19, 2020 at 16:53

Fahd Lihidheb

7104 silver badges22 bronze badges

4 Comments

Malik Haseeb Over a year ago

i check this in console, it is an array

Fahd Lihidheb Over a year ago

did you try to add an *ngIf="groupUsers" before the loop ?

Malik Haseeb Over a year ago

Yes my dear, i tried but still the same problem persist

Shurvir Mori Over a year ago

stackoverflow.com/a/51286078/5114465

Collectives™ on Stack Overflow

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

Error

Group-component.ts

Group-service.ts

Group-component.html

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Error

Group-component.ts

Group-service.ts

Group-component.html

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related