Ionic 2 json http

I do have problem to view data from this api “https://waktu-solat-api.herokuapp.com/api/v1/prayer_times.json” . Which is i want to view data for 16 negeri for the 1 st page, then data for zon for each negeri that has been selected, which is based on the negeri it will view the zon of the negeri in the 2 nd page, and last is to view waktu_solat for each zon for the 3 rd pages…

below is my sample code for 1 page

this html

<ion-item no-lines *ngFor="let states of solat">
	  <button ion-button color="primary" block>{{states}}</button>
 </ion-item>

this is ts for html

 {
	  this.loadSolat();
  }

  	loadSolat(){
	this.solatService.load()
		.then(data1 => {
    console.dir(data1);
			this.solat = data1;
		});
	}

and this is to call api json

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SolatService3 {
	data1: any;
  constructor(public http: Http) {
    console.log('Hello SolatService3 Provider');
  }

	load() {
		if (this.data1) {
		// already loaded data
		return Promise.resolve(this.data1);
  }

  // don't have the data yet
  return new Promise(resolve => {

    this.http.get('https://waktu-solat-api.herokuapp.com/api/v1/prayer_times.json')
      .map(res => res.json())
      .subscribe(post => {

        this.data1 = post.data.negeri;
        resolve(this.data1);
      });
  });
}
}

for the 2nd and 3rd page I having the same problem

Use local storage or serialize the object store each value as local storage to get to next page

1 Like

im using ubuntu 16.04 LTS

what is your problem? That it returns [OBJECT OBJECT]? Of course it will returns object as you only bind the object… take a look at your piece of codes below

let states of solat ... {{states}}

You could try to bind to each member of the object (e.g: states.xxx)

2 Likes

let local = JSON.stringify(this.data1);
let LocalObject = JSON.parse(local);
this.localId = LocalObject.Id;
this.localnama = LocalObject.nama;

OR
<ion-item no-lines *ngFor=“let states of solat”>
{{states.nama}}

1 Like

yes this is correct to get a value form object {{states.Name}}

1 Like

this is what i get after put {{states.nama}}

Sorry Bro… here nama means your field name… set your any one filed name

Example for :Id, Name, Age, Gender, Place

1 Like

You should understand how to work with JSON object first…
If you do understand, then take a look that returned JSON Data from API you used…
You can see which object member you have to bind to suit your need :slight_smile:

Regards

1 Like

image

based on that:

this.data1 = post.data.negeri;

data is refer to row 2 and negeri is row 3… for the 1st page i want to get data for nama which is total of 16… and after I am click on one nama eg:labuan then it will display the zon.nama = labuan which is for the 2nd page, then waktu_solat for that zon will be appear after click on zon.nama = labuan

Regards

what do you need for second page. when you have to click a labuan. ask me frankly. give me your concept

1 Like

my concept is develop an app as below providing with the mockup screen;

using this API;

this.http.get('https://waktu-solat-api.herokuapp.com/api/v1/prayer_times.json')

1st pages

-The concept of my app is to display waktu_solat in every negeri,
-Where the 1st page shows a list of all the negeri based on the JSON.
-If one of the negeri is selected, it will go to the 2nd page,

2nd Pages

-In the 2nd page, it will display a list consisting zon that are available in the selected negeri,
-If I selected one of the zon from the list, it will direct the user to the 3rd page,

3rd pages

-Where it will display the waktu_solat of the particular zon of the negeri that the user selected.

Regards :slight_smile:

Here get zon ID to belongs to the zon waktu_solat details

example zon - labuan -id to display single waktu details

another example for

My name is : arul and i have particular unique id ‘1’ here id to display the details

image

services

this.http.get(‘https://waktu-solat-api.herokuapp.com/api/v1/prayer_times.json’)
.map(res => res.json())
.subscribe(post => {

    this.data1 = post.data.negeri;
    resolve(this.data1);
  });

});

is used to view data on that json,

so then the html

<ion-item no-lines *ngFor=“let states of solat”>
{{states}}

will display [OBJECT OBJECT],

fix the {{states.nama}}

will display Empty box only…

which is is wrong here?

Did you try {{ states?.name }} ? This will handle the async data.

1 Like

Thanks yewness this is solved my 1st page… :slight_smile:

regards

For the 2nd page, even I click on any negeri it will show all zon. help please?