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 ponent.ts:

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

my ponent.html:

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

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 ponent.ts:

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

my ponent.html:

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

• javascript
• angular
• typescript
• angular7
• angular-template

• Can you please console.log the response? – dileepkumar jami Commented Feb 19, 2019 at 13:18
• 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<User[]>(environment.apiBaseUrl + '/users'); – Vinko Vorih Commented Feb 19, 2019 at 13:20
• {status: true, docs: Array(5)} this is my console.log of response @dileepkumarjami – sun Commented Feb 19, 2019 at 13:22
• 2 try *ngFor="let use of userService.users?.docs" as you reference the wrong object in the template according to the console.log. – ForestG Commented Feb 19, 2019 at 13:25
• Thanks @ForestG it's working.. – sun Commented Feb 19, 2019 at 13:27

3 Answers 3

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"

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

ponent.ts:

users: User[];

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

ponent.html:

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

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>