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

Question

I'm getting error while retrieving data from the database.

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

I tried all the remaining responses but I'm not getting the exact solution.

my service.ts:

  users: User[];
  getAllUsers(){
    return this.http.get(environment.apiBaseUrl + '/users');
  }

my component.ts:

  refreshUserList(){
    this.userService.getAllUsers().subscribe((res) => {
      this.userService.users = res as User[];
    })
  };

my component.html:

<tr *ngFor="let use of userService.users">
  <td>{{ use.fullName }}</td>
</tr>

so you've done something weird. your response isn't typeof User[]. Try add response type in getAllUsers() method (User[]). and in http.get add this.http.get(environment.apiBaseUrl + '/users'); — Vinko Vorih, Feb 19 '19 at 13:20
{status: true, docs: Array(5)} this is my console.log of response @dileepkumarjami — sun, Feb 19 '19 at 13:22
try `*ngFor="let use of userService.users?.docs"` as you reference the wrong object in the template according to the console.log. — ForestG, Feb 19 '19 at 13:25
Displaying data from service inside template is not a good idea, better use component method or field — Kamil Naja, Feb 19 '19 at 20:03

score 4 · Accepted Answer · answered Feb 19 '19 at 13:40

4

So, use the below as you can see that the response is not an array but one of its fields is an array. So, you have to iterate on the array field.

*ngFor="let use of userService.users?.docs"

answered Feb 19 '19 at 13:40

dileepkumar jami

score 2 · Answer 2 · answered Feb 19 '19 at 22:27

You should store your users in a local array of User in the component, and user the *ngFor on the users.docs

component.ts:

users: User[];

refreshUserList(){
    this.userService.getAllUsers().subscribe(res => {
      res !== null : this.docs = res.docs;
    })
};

component.html:

<tr *ngFor="let user of users?.docs">
  <td>{{ user.fullName }}</td>
</tr>

score 0 · Answer 3 · answered Jun 19 '20 at 10:06

0

In other way, you can check the data is ready to serve in html file by the following way.

<div *ngIf="userService.users?.length > 0">
   <tr *ngFor="let use of userService.users">
       <td>{{ use.fullName }}</td>
    </tr>
</div>

answered Jun 19 '20 at 10:06

Ahmad Sharif

3 Answers3