CODEWITHSUNDEEP
angularionic-frameworkionic3
sdfgg45
sdfgg45

Reputation: 1242

Issiues retrieving data with HTTP and show in view with ionic

I'm trying to get my JSON data to show in a app using ionic.

Im getting the following error when trying to output the data:

ERROR Error: "Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

My data looks like this:

{
  "1": {
    "name": "John",
    "lastname": "Jonson",
    "email": "[email protected]",
    "image": ""
  },
  "5": {
    "name": "Peter",
    "lastname": "Parker",
    "email": "[email protected]",
    "image": ""
  },
  "8": {
    "name": "Joe",
    "lastname": "Lo",
    "email": "[email protected]",
    "image": ""
  },
}

My HTML code:

<ion-list *ngFor="let user of users">
    <ion-item>{{ user.name}}</ion-item>
</ion-list>

And finaly the js code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

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

export class HomePage {

    users: Observable<any>;

    usersList = [];

    constructor(public navCtrl: NavController, public httpClient: HttpClient) {

        this.users = this.httpClient.get('http://example.com/api/user');

        this.users.subscribe(data => {
            this.usersList = data,
             console.log(data);
        });
    }
}

Upvotes: 0

Views: 47

Answers (2)

Berk Akkerman
Berk Akkerman

Reputation: 483

You can convert your data as an object array with keys.

Object.keys(yourData).forEach(value=>{ this.users.push({Key: value, User: data[value]})})

and template like below:

<ion-list *ngFor="let user of users">
   <ion-item>{{ user.User.name}}</ion-item>
</ion-list>

Upvotes: 1

Mangesh Daundkar
Mangesh Daundkar

Reputation: 1046

NgFor only supports binding to Iterables such as Arrays.

So let your data needs to look like this.

const myData = [
  {
    "name": "John",
    "lastname": "Jonson",
    "email": "[email protected]",
    "image": ""
  },
  {
    "name": "Peter",
    "lastname": "Parker",
    "email": "[email protected]",
    "image": ""
  },
  {
    "name": "Joe",
    "lastname": "Lo",
    "email": "[email protected]",
    "image": ""
  },
]

More on arrays https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array

Upvotes: 0

Related Questions