Cannot find a differ supporting object '[object Object]'

Ionic Framework ionic-v3
1

Hello!

I’m new to Ionic and I’m having trouble querying my API. Console.log information arrives normally, but I can not display the data in home.html. I will send the error code and my query code. Could you help me with this consultation?

Error:

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

Result console.log

image

Providers:

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ServerHttpService {
  data: any;

  apiUrl = 'http://localhost/api/v1';

  constructor(public http: Http) {
    console.log('Hello ServerHttpService Provider');
  }

getUsers() {
  if (this.data) {
    return Promise.resolve(this.data);
  }

  return new Promise(resolve => {

    let myHeader = new Headers({
      "Accept": "application/vnd.api+json",
      "Content-Type": "application/vnd.api+json",
      "Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIsImV4cCI6MTUwMDMxODE0OH0.O3vHmSW5Crn0b3BlHO7XSUII6IswOgICtKC13a3aO5g"
    });

    let options = new RequestOptions({
      headers: myHeader
    });
    
    this.http.get(this.apiUrl+'/servidores', options)
      .map(res => res.json())
      .subscribe(data => {
        
        this.data = data;
        resolve(this.data);
      });
  });
}

}

Home.ts:

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Login } from './../login/login';
import { Info } from './../info/info';
import { ServerHttpService } from './../../providers/server-http-service';
import { LoginServiceProvider } from './../../providers/login-service/login-service';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
  users: any;

  constructor(
    public navCtrl: NavController,
    public alertCtrl: AlertController,
    public serverHttpService: ServerHttpService,
    public loginServiceProvider: LoginServiceProvider) {

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


  }

}

Home.html:

<ion-header>
  <ion-navbar color="principal">
    <ion-title>
      Dashboard
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="showConfirm()">
          <ion-icon name="exit"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>


  <ion-list *ngFor="let user of users">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="{{user.logo}}">
      </ion-thumbnail>
      <h2>{{user.nome}}</h2>
      <p>{{user.ippublico}}</p>
    </ion-item>
  </ion-list>



</ion-content>
2

Can you try changing “users: any;” to “users: any = [ ]” in Home.ts file

3

Hello Friend! Thanks for the answer.

I made the change as you taught me, but it showed a different error from the previous one, I’ll show it to you

Error:

Runtime Error
Error trying to diff '[object Object]'. Only arrays and iterables are allowed
4

users has to be an array ([]), you have an object ({}) right now. Find a way to put the users into an array. Add console.log directly after you get the data so you know what it looks like, then find a good place to transform it and check with more logging that you now have an array.

1 Like
5

I love you so much!!!