Error trying to diff '[object Object]'. Only arrays and iterables are allowed. (Ionic 3)

Question

I'm doing a project and I keep getting the error Error trying to diff '[object Object]'. Only arrays and iterables are allowed I looked up the error and there are two ways to do it, change the incoming data(no possible) or "transform the object in my component". I need to do the latter, but I can't find any way how to as I'm only a student. Here's some of the relevant code:

characters.ts

     apiUrl = 'https://swapi.co/api/people';

     getUsers() {
     return new Promise(resolve => {
     this.http.get(this.apiUrl)
     .subscribe(data => {
      resolve(data);
     }, err => {
     console.log(err);
    });
   });

home.ts

  users: any= [];

  constructor(public navCtrl: NavController, public restProvider: 
  CharactorsProvider) {
  this.getUsers();
 }


  getUsers() {
  this.restProvider.getUsers()
  .then(data => {
  this.users = data;
  console.log(this.users);
 });
 }

home.html

 <ion-list>
 <ion-item *ngFor="let user of users">
  <p>{{charactor.results}}</p>
 </ion-item>
 </ion-list>
</ion-content>

Please any help with changing the code would be a huge help. I'm new to Ionic, only a few weeks in, and have a basic knowledge of it.

Edit: Code not in boxes. Edit 2: API I'm using https://swapi.co/api/people/

what do you see when you put console.log(JSON.stringify(this.users)); — Sajeetharan
– Sajeetharan, Commented May 1, 2018 at 16:01
@BenWest The Console.log outputs the array {name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", …} — Jack Caltagirone
– Jack Caltagirone, Commented May 1, 2018 at 16:17
@Sajeetharan puts out the array {"name":"Luke Skywalker","height":"172","mass":"77","hair_color":"blond","skin_color":"fair","eye_color":"blue","birth_year":"19BBY","gender":"male","homeworld":"swapi.co/api/planets/1", } etc, will post the api in post — Jack Caltagirone
– Jack Caltagirone, Commented May 1, 2018 at 16:19
You need an iterable (array) from your server responses. Basically you need to grab "results" array in the response. — Sergey Rudenko
– Sergey Rudenko, Commented May 1, 2018 at 16:23

Sajeetharan · Accepted Answer · 2018-05-01 16:40:05Z

1

Well based on the JSON you posted above, it looks like you have a Object instead of array.

As the error stated above "Error trying to diff '[object Object]'. Only arrays and iterables are allowed" you need array to iterate over using ngFor.

Either change your API to send the response as array, or push the object to an array.

Also you have an issue in ngFor variable

<ion-item *ngFor="let user of users">
  <p>{{user.name}}</p> //access each user object from array
 </ion-item>

EDIT

When i looked in the response, actually you should access the results property from the response which is an array.

this.http.get('https://swapi.co/api/people/')
      .subscribe((res: Response) => {
        this.users = res.json().results; 
      }, error => {
        console.log(error);
        this.errorFromSubscribe = error;
});

HERE IS A WORKING STACKBLITZ

edited May 1, 2018 at 16:40

answered May 1, 2018 at 16:22

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Sajeetharan Over a year ago

if you are sure that api is returning only one object always, you can just do this.users.push(data);

Sajeetharan Over a year ago

@JackCaltagirone check the working stackblitz edit above

Collectives™ on Stack Overflow

Error trying to diff '[object Object]'. Only arrays and iterables are allowed. (Ionic 3)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related