How to fix Error trying to diff '[object Object]'. Only arrays and iterables are allowed in angular 10 using defined array[]?

Question

I am using angular 10 for my application. in my application, I have a get method and I got the data i want to display it. for this question there are lot of answers are there in here, but i tried everything it doesn't work properly.

I have a model file and in that file, I have deserialize(), serialize() options also, so the response data type should same as the interface file type. But response data showing this error(Only arrays and iterables are allowed)not rendering in HTML also. but I used an empty array for the response data variable.

I included my stackblitz URL also here, please help me to fix this.

https://stackblitz.com/edit/sankar-apr-16?file=src%2Fapp%2Fmodel-users%2Fmodel-users.component.ts

This is my model.ts codes:

userInfo: userInformation[] = [];

ngOnInit() {
 this.enableLoader = true;
 this.formService.findAll().subscribe((data: userInformation[]) => {
   this.enableLoader = false;
   this.userInfo = data;
   console.log(this.userInfo)
 });

This is my mode.ts file

export class userInformation extends Base implements PageObject {
@serializable
public id: number;
@serializable
public avatar: string;
@serializable
public email: string;
@serializable(alias('first_name'))    
public firstname: string;
@serializable(alias('last_name'))
public lastname: string;

 deserialize(input: any): this {
   return Object.assign(this, deserialize(userInformation, input));
 }
}

This is my service file:

public findAll():Observable<userInformation[]> {
   return this.httpClient.get<userInformation[]>(this.usersUrl + '/api' + '/users' + '?page=2', {
    headers: this.httpHeaders.contentTypeApplication,
     params: this.httpHeaders.serializeParams()
   })
 }

Gérôme Grignon · Accepted Answer · 2021-04-21 10:28:32Z

1

Result of your console.log :

data: Array[6]
page: 2
per_page: 6
support: Object
total: 12
total_pages: 2

If you look at the log into your devtools generated by your console.log(this.userInfo), it doesn't log an array of type userInformation[]. This array is nested into the data property of the response.

As the response is an object, you get an error explaining you cant iterate over it (as you can't iterate on the object).

You need to change the data returned by your service to map it to the data property.

You need a new interface to match the response of the api :

interface UsersResponse {
  data: userInformation[];
  page: number;
  per_page: number;
  support: any;
  total: number;
  total_pages: number;
}

Then you need to update the returned type of your http call and add the rxjs map operator to change the stream to the data property :

public findAll():Observable<userInformation[]> {
    return this.httpClient.get<UsersResponse>(this.usersUrl + '/api' + '/users' + '?page=2', {
      headers: this.httpHeaders.contentTypeApplication,
      params: this.httpHeaders.serializeParams()
    }).pipe(
      map(response => response.data)
    );
  }

Last step, update your template from :

<div class="wrapper" *ngFor="let users of userInfo?.data">

to

<div class="wrapper" *ngFor="let users of userInfo">

edited Apr 21, 2021 at 10:28

answered Apr 21, 2021 at 9:58

Gérôme Grignon

4,2581 gold badge9 silver badges19 bronze badges

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

1 Comment

Sankar S Over a year ago

Gerome, thanks for your answer. can you tell me how to do that in service, because I have an interface also used in the service?

Collectives™ on Stack Overflow

How to fix Error trying to diff '[object Object]'. Only arrays and iterables are allowed in angular 10 using defined array[]?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related