Display JSON object in ionic2

Question

Im trying to display below JSON object in an ionic2 application. I am getting a blank screen while running the application. i tried some tutorials but no progress.

 [
  {
    "program_id": 1000,
    "programName": "Luna_Titan_L",
    "costElement": "Material Cost",
    "trackingID": "LT001S",

  },
  {
    "program_id": 1001,
    "programName": "Luna_Titan_L",
    "costElement": "Material Cost",
    "trackingID": "LR001S"
  },

.....
]

home.ts

import { Component } from '@angular/core';  
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  progs: any;

  constructor(public navCtrl: NavController, public http: Http) {
    this.http.get('http://url.com/api').map(res => res.json()).subscribe(data => {
        this.progs = data;
    });

 }

}

home.html

  <ion-list>

    <ion-item *ngFor="let prog of progs">
      {{prog.programName}}
    </ion-item>

  </ion-list>

That is not valid JSON though...? Did you just cut it down for demo purposes? Does your console output any error? — Patrick, Apr 04 '17 at 13:52

score 0 · Answer 1 · answered Apr 04 '17 at 12:33

0

Move the service call outside of the constructor and place it inside ngOnInit

ngOnInit() {
 this.http.get('http://url.com/api').map(res => res.json()).subscribe(data => {
        this.progs = data;
    });
}

answered Apr 04 '17 at 12:33

Sajeetharan

216,225
63
350
396

1

so what is the issue? – Sajeetharan Apr 04 '17 at 12:40
yeah if it is working fine..what problem are you getting here? – Suraj Rao Apr 04 '17 at 12:41
im getting a blank page – Abhishek Apr 04 '17 at 12:54
debug and see if you are getting the data – Sajeetharan Apr 04 '17 at 12:54
@Abhishek are you using ionic serve or device/emulator? – Suraj Rao Apr 04 '17 at 12:56
@suraj ionic serve – Abhishek Apr 04 '17 at 12:57
do some console logs and check..you will have to debug – Suraj Rao Apr 04 '17 at 12:58
Itried belwo tutorial and its works fine for me. But nothing happens When im trying my own api. `export class HomePage { posts: any; constructor(public http: Http) { this.http.get('https://www.reddit.com/r/gifs/new/.json?limit=10').map(res => res.json()).subscribe(data => { this.posts = data.data.children; }); }` ` {{post.data.url}} ` – Abhishek Apr 04 '17 at 13:03
that is what debug and see – Sajeetharan Apr 04 '17 at 13:04

score 0 · Answer 2 · answered Apr 04 '17 at 12:40

While it is better to do asynchronous calls in lifecycle hooks rather than the constructor as @Sajeetharan mentions in his answer, your issue is the view gets loaded before progs is set. Use an *ngIf to check for the value so that it gets loaded after the value is set.

<ion-list *ngIf="progs">

    <ion-item *ngFor="let prog of progs">
      {{prog.programName}}
    </ion-item>

  </ion-list>

Display JSON object in ionic2

2 Answers2