I am Beginner in Ionic 2. I want to pass Json data from one page to another after click on list items.
Item in List comes from json, it have particular id associated with it. So, I want to pass particular id after click on particular item.
This is json links:
http://factoryunlock.in/sundar/public/api/v1/products
with the help of this link i will shows product in list[![enter image description here][1]][1]
2.But now i want to show details of that particular item. So i used this link
http://factoryunlock.in/sundar/public/api/v1/products/1
i want to change that id (In Link 2 “products/1”) after click on particular item
This is my Listview code(Second.ts).
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EarthquakesProvider } from '../../providers/earthquakes/earthquakes';
import { DetailsPage } from '../details/details';
import { ChartsPage } from '../charts/charts';
@IonicPage()
@Component({
selector: 'page-second',
templateUrl: 'second.html',
providers: [EarthquakesProvider]
})
export class SecondPage {
public DateList: Array<Object>;
constructor(public _navCtrl: NavController,
public _earthquakes: EarthquakesProvider) {
this.getEarthquakes();
}
public Listitem(l) {
this._navCtrl.push(DetailsPage
);
}
public openModal() {
this._navCtrl.push(ChartsPage);
}
getEarthquakes() {
this._earthquakes.loadEarthquakess().subscribe(res => {
this.DateList = res.data;
});
}
}
This is my Provider Controller:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class EarthquakesProvider {
constructor(public _http: Http) {
console.log('Hello Earthquakes Provider');
}
loadEarthquakess() {
return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products')
.map(res => res.json());
}
loadEarthquakesdetails() {
return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products/1')
.map(res => res.json());
}
This is my details.ts code
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EarthquakesProvider } from '../../providers/earthquakes/earthquakes';
@IonicPage()
@Component({
selector: 'page-details',
templateUrl: 'details.html',
providers: [EarthquakesProvider]
})
export class DetailsPage {
public DateList: Array<Object>;
item: any;
constructor(public _navCtrl: NavController, public _earthquakes: EarthquakesProvider) {
this.getEarthquakes();
}
getEarthquakes() {
this._earthquakes.loadEarthquakesdetails().subscribe(res => {
this.DateList = res.data;
console.log(res.data);
});
}
}
This is my List View Snapshot
This is my Details view snapshot
