Looping through JSON data

Ionic Framework ionic-v3
1

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:

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:

<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:

What am i doing wrong?

2

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.

 <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 :wink:

2 Likes
3

This worked! You helped me second time already :smiley: 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? :slight_smile:

4

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

5

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