# Ionic display single JSON entry

**URL:** <https://forum.ionicframework.com/t/ionic-display-single-json-entry/143343>\
**Category:** ionic-v3\
**Created:** [October 1, 2018, 2:32pm UTC](https://forum.ionicframework.com/t/ionic-display-single-json-entry/143343 "2018-10-01T14:32:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kur](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@kur](https://forum.ionicframework.com/u/kur)\
**Post date:** [October 1, 2018, 2:32pm UTC](https://forum.ionicframework.com/t/ionic-display-single-json-entry/143343/1 "2018-10-01T14:32:02Z")

</div>

Hello all  
I followed some tutorials ([JSON Tutorial](https://www.djamware.com/post/59924f9080aca768e4d2b12e/ionic-3-consuming-rest-api-using-new-angular-43-httpclient)) 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?

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

```

```auto
{

  "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!

---

<div class="post-metadata">

**Author:** ![hariman](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hariman/32/121974_2.png) [@hariman](https://forum.ionicframework.com/u/hariman)\
**Post date:** [October 1, 2018, 3:27pm UTC](https://forum.ionicframework.com/t/ionic-display-single-json-entry/143343/2 "2018-10-01T15:27:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mohamedwahshey](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mohamedwahshey/32/121879_2.png) [@mohamedwahshey](https://forum.ionicframework.com/u/mohamedwahshey)\
**Post date:** [October 1, 2018, 3:36pm UTC](https://forum.ionicframework.com/t/ionic-display-single-json-entry/143343/3 "2018-10-01T15:36:53Z")

</div>

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
  ]
  },
  }]
```

---

<div class="post-metadata">

**Author:** ![kur](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@kur](https://forum.ionicframework.com/u/kur)\
**Post date:** [October 7, 2018, 9:12am UTC](https://forum.ionicframework.com/t/ionic-display-single-json-entry/143343/4 "2018-10-07T09:12:48Z")

</div>

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

```auto
  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));
    });
  }

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:14pm UTC](https://forum.ionicframework.com/t/ionic-display-single-json-entry/143343/5 "2021-07-19T21:14:00Z")

</div>

Closed on July 19, 2021, 9:14pm UTC