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

Question

I'm trying to invoke my REST API to get some data and display them in html page Using Angular 10. here's my my http service.

public findUsers(page: number, size: number): Observable<User[]> {
  return this.http.get<User[]>(AUTH_API+`users?page=${page}&size=${size}`, httpOptions);
}

And here's my service's call.

  export class AccountComponent implements OnInit {
  paginator: MatPaginator = {} as MatPaginator;
  loaded: boolean;
  users: User[];
  data:any;

  constructor(private accountSerive: AccountService) { }

  ngOnInit(): void {
    this.paginator.pageIndex = 0;
        this.paginator.pageSize = 20;
    this.getUsers();
  }
  getUsers() {
    this.data = this.accountSerive.findUsers(this.paginator.pageIndex, this.paginator.pageSize)
    .subscribe((data) => {
      this.users = data;
      this.loaded = true; 
    });
  }

}

Here's my HTML code

<tr *ngFor="let user of users" >
  <td>{{user.name}}</td>
  <td>{{user.username}}</td>
  <td>{{user.email}}</td>
  <td>{{user.password}}</td>
  <td>{{user.role}}</td>
</tr>

And finally my user Model

    export interface User {
    email: string;
    password: string;
    userName: string;
    roles: [Role]; 

}
export interface Role {
    name: string; 
    
}

Here the data content

It appears this.users isn't an array. Do a console.log(data) inside the subscription and post the screenshot. — Barremian
– Barremian, Commented Nov 15, 2020 at 18:17
Or you don't have differences for all arrays. Just add some identifiable keywords to each objects. — Zhengzhe Li
– Zhengzhe Li, Commented Nov 15, 2020 at 18:23
console.log(data) => {content: Array(5), totalElements: 5} content: (5) [{…}, {…}, {…}, {…}, {…}] — BARHOUMI
– BARHOUMI, Commented Nov 15, 2020 at 19:10

tommueller · Accepted Answer · 2020-11-15 20:17:22Z

1

The data you receive from the API apparently is returned in this format:

{
  content: User[],
  totalElements: number
}

So the actual array of results can be found under a property called content. So you need to map your call to this property like this:

// return type
export interface UsersDto {
  content: User[];
  totalElements: number;
}

public findUsers(page: number, size: number): Observable<User[]> {
    return this.http.get<UsersDto>(AUTH_API+`users?page=${page}&size=${size}`, httpOptions)
             .pipe(map(result => result.content));
}

edited Nov 15, 2020 at 20:17

answered Nov 15, 2020 at 19:44

tommueller

2,5263 gold badges33 silver badges50 bronze badges

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

2 Comments

BARHOUMI Over a year ago

content is not declared any where !

tommueller Over a year ago

I updated the code to reflect the correct return value from the endpoint

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related