CODEWITHSUNDEEP
angulartypescriptngfor
Malik Haseeb
Malik Haseeb

Reputation: 671

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

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

Upvotes: 4

Views: 3726

Answers (3)

Usama
Usama

Reputation: 140

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>

Upvotes: 1

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

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>

Upvotes: 1

Fahd Lihidheb
Fahd Lihidheb

Reputation: 710

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

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

Upvotes: 0

Related Questions