Looping through JSON data

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';

  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) {

  getdata() {
    // this.loading.present();
      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-navbar color="myDark">

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

Here is what i get as output:

What am i doing wrong?

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

Last thing, don’t post screenshots :wink:


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:

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

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