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

4
votes

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 enter image description here

I don't know why console show me this error

3
angulartypescriptngfor
Did you check if you're getting any data from request? – Sachin Parashar
yes, data is in array format – Malik Haseeb

3 Answers

1
votes

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>
1
votes

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>
0
votes

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

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