Ionic display single JSON entry

Ionic Framework ionic-v3
1

Hello all
I followed some tutorials (JSON Tutorial) and was able to display the results in my test app.

But now I wanted to change the JSON input to my own data but I get the error “NgFor only supports binding to Iterables such as Arrays.”

My JSON has not multiple entries because it’s not required. I just want to display one result. Into what do I have to change my code?

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

{

  "restaurant": {
  "name": "Test",
  "oeffungszeiten": "13:00 - 17:00",
  "adresse": "Foobar 1",
  "lat": "46.598092",
  "long": "8.446493"
  },
  "lieferservice": {
  "lieferzeit": "30 Min",
  "name": "Test",
  "minbestellung": "30 EUR",
  "lieferkosten": "Free",
  "oeffnungszeiten": "13:00 - 17:00",
  "lieferung": [
    3014,
    3013,
    3001
  ]
  },
  "rezept": {
    "arbeitszeit": "30min",
    "schwierigkeitsgrad": "Mittel",
  "zutaten": [
    "gemuese",
    "fleisch",
    "beilage"
  ]
  }
}

Thanks in advance!

2

Your issue is related to the data structure you use in your app.

The root of your JSON data is an object and not an array, so simply remove the ngFor from your template and instead of having a “users” attribute, create a “user” attribute and import your JSON data into it.

3

Try this

HTML:

<ion-list inset>

<ion-item *ngFor="let user of object">

<p>{{user.restaurant.name}}</p>

</ion-item>

</ion-list>

TS:

object: any = [{

restaurant: {
name: "Test",
oeffungszeiten: "13:00 - 17:00",
adresse: "Foobar 1",
lat: "46.598092",
long: "8.446493"
},
lieferservice: {
  lieferzeit: "30 Min",
  name: "Test",
  minbestellung: "30 EUR",
  lieferkosten: "Free",
  oeffnungszeiten: "13:00 - 17:00",
  lieferung: [
  3014,
  3013,
  3001
  ]
  },
  }]
4

I solved it, I know there is a overhead but to understand it was more clear this way:

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


      this.test1 = JSON.stringify(this.users);
      this.data1 = JSON.parse(this.test1);
      // Output: Test
      this.display1 = this.data1['restaurant'].name;
      console.log(JSON.stringify(this.data1['restaurant'].name));
    });
  }