# Looping through JSON data

**URL:** <https://forum.ionicframework.com/t/looping-through-json-data/94616>\
**Category:** ionic-v3\
**Created:** [June 16, 2017, 8:32am UTC](https://forum.ionicframework.com/t/looping-through-json-data/94616 "2017-06-16T08:32:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![daxdax89](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/daxdax89/32/109780_2.png) [@daxdax89](https://forum.ionicframework.com/u/daxdax89)\
**Post date:** [June 16, 2017, 8:32am UTC](https://forum.ionicframework.com/t/looping-through-json-data/94616/1 "2017-06-16T08:32:17Z")

</div>

Hello guys. I’ve been killing myself over this for like few hours already. I have a PHP api that i load JSON data from.  
I load this data via http provider and it works perfectly fine.  
The issue happens when i want to show all the data from arrays into ion list. I’ve made a classic loop but it only show output of one array object at index for some reason.  
Here is my TS file code:

```auto
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpProvider } from '../../providers/http/http';

@IonicPage()
@Component({
  selector: 'page-ulice',
  templateUrl: 'ulice.html',
  providers: [HttpProvider]
})
export class UlicePage {
  dbData: any;
  loading: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public httpProvider: HttpProvider) {
    this.getdata();
  }

  getdata() {
    // this.loading.present();
    this.httpProvider.getJsonData().subscribe(
      result => {
        this.dbData = result;
        console.log("Success : " + this.dbData);
      },
      err => {
        console.error("Error : " + err);
      },
      () => {
        // this.loading.dismiss();
        console.log('getData completed');
      }
    );
  }

  showStreets() {
    for (var i = 0; i < this.dbData.length; i++) {
      return this.dbData[i].id;
    }
  }

  showNames() {

  }

  filter() {

  }

}

```

And here is my HTML file:

```auto
<ion-header>
  <ion-navbar color="myDark">
    <ion-title>Ulice</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of dbData">
      <p (click)='showNames()'>{{showStreets()}}</p>
    </ion-item>
  </ion-list>
  <ion-fab bottom right>
    <button ion-fab (click)="filter()" color="myPrimary2">
      <ion-icon name="search"></ion-icon>
  </button>
  </ion-fab>
</ion-content>

```

Here is what i get as output:

> **[Screenshot](https://prnt.sc/fkf52k)**
>
> Captured with Lightshot

What am i doing wrong?

---

<div class="post-metadata">

**Author:** ![luukschoen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luukschoen/32/98585_2.png) [@luukschoen](https://forum.ionicframework.com/u/luukschoen)\
**Post date:** [June 16, 2017, 8:40am UTC](https://forum.ionicframework.com/t/looping-through-json-data/94616/2 "2017-06-16T08:40:52Z")

</div>

Couple of things. First off, why are you providing HTTP in your page? Don’t do that. It’s enough to import the provider (without adding it into providers). I have got no clue how result actually looks like (the JSON) so it’s hard to tell what the expected output should be.

Instead of creating a classic loop, just use the ngFor. That’s what it’s for.

```auto
 <ion-item *ngFor="let item of dbData">
      <p (click)='showNames()'>{{ item.id }}</p> <!-- if you want to show that id -->
    </ion-item>

```

Last thing, don’t post screenshots 😉

---

<div class="post-metadata">

**Author:** ![daxdax89](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/daxdax89/32/109780_2.png) [@daxdax89](https://forum.ionicframework.com/u/daxdax89)\
**Post date:** [June 16, 2017, 8:48am UTC](https://forum.ionicframework.com/t/looping-through-json-data/94616/3 "2017-06-16T08:48:33Z")

</div>

This worked! You helped me second time already 😃 And you’ve told me before about screenshots but didn’t know how else to show output sorry.  
Thanks for provider tip, i see it works without adding it. I followed some documentation and guy who wrote it did that so i did as well i guess. I guess my issue is solved now, thanks a lot! Any other tips you might have for me and my code to speed up learning curve? 🙂

---

<div class="post-metadata">

**Author:** ![itee123](https://avatars.discourse-cdn.com/v4/letter/i/edb3f5/32.png) [@itee123](https://forum.ionicframework.com/u/itee123)\
**Post date:** [April 5, 2018, 6:08am UTC](https://forum.ionicframework.com/t/looping-through-json-data/94616/4 "2018-04-05T06:08:01Z")

</div>

why you called showNames() function instead of showStreets()

---

<div class="post-metadata">

**Author:** ![itee123](https://avatars.discourse-cdn.com/v4/letter/i/edb3f5/32.png) [@itee123](https://forum.ionicframework.com/u/itee123)\
**Post date:** [April 5, 2018, 6:10am UTC](https://forum.ionicframework.com/t/looping-through-json-data/94616/5 "2018-04-05T06:10:09Z")

</div>

In my Code i get this error  
Cannot find a differ supporting object but it load a whole API not a particular object