How to pass data from one page to another for Navigation in Ionic 2

Question

I am Beginner in Ionic 2. I want to pass Json data from one page to another after I click on a list items. The Items in the list comes from json and has particular id's associated with each item. So I want to pass a particular id after a click event on a particular item.

This is the json link:

1. http://factoryunlock.in//products with the help of this link I will shows product in list

2. But now I want to show details of that particular item. So I use this link

http://factoryunlock.in/products/1

I want to change that id (In Link 2 products/1) after the click event on a 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 Details view snapshot

Homosporous

You want to make it dynamic right? – Cabrales

yes i want to make it dynamic – Homosporous

Answer 1

List view Page

 public Listitem(id) {
    this._navCtrl.push(DetailsPage, {id: id}); 
 }

Provider Controller:

 loadEarthquakesdetails(id) {
        return this._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/${id}`)
            .map(res => res.json());
    }

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;
     id: number;
    constructor(public _navCtrl: NavController, public _earthquakes: EarthquakesProvider, public navParams: NavParams) {

         this.id = navParams.get('id');


    }
    ionViewDidLoad() {
        this.getEarthquakes(this.id);
}
    getEarthquakes(id) {
        this._earthquakes.loadEarthquakesdetails(id).subscribe(res => {
            this.DateList = res.data;
            console.log(res.data);
        });
    }

 }

Cabrales

sir in Html how i can use this id <ion-list> <button ion-item *ngFor="let item of DateList" (click)="Listitem(l)" > {{ item.product }} <ion-item style="width:50%" > <img [src]="item.images" /> </ion-item> </button> @Swapnil Patwa sir – Homosporous

<button ion-item *ngFor="let item of DateList" (click)="Listitem(item.id)" >. – Cabrales

As you are beginner, remember string inside this._http.get() is not in single ' quote, its ` (button below esc). – Cabrales

Answer 2

You can use this in your

Provider Controller

loadEarthquakesdetails(id) {
    return this._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/'+'id')
        .map(res => res.json());
}

This work for me.

Shoran