CODEWITHSUNDEEP
jsonionic2
Taieb
Taieb

Reputation: 920

Navigating & Passing Data Between Pages Ionic 2

I'm having some issues while navigating between pages with Ionic2.

I have a List of Data, that I got from a data.json

Here is the list

enter image description here

I want to get details:

Example - From "A"

The data that I have on my data/Example.Json

 {
  "title": "A",
  "lat": 2.323733,
  "lon": 64,546465
},

So as soon as I click on the Title, I want to get the title, lat and lon on a new page.

app.modules.ts

    import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MapPage } from '../pages/map/map';
import { ListPage } from '../pages/list/list';
import { DetailPage } from '../pages/detail/detail';
import { Locations } from '../providers/locations';
import { GoogleMaps } from '../providers/google-maps';
import { Connectivity } from '../providers/connectivity';
declare var google: any;

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MapPage,
    ListPage,
    DetailPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MapPage,
    ListPage,
    DetailPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Locations,GoogleMaps, Connectivity]
})
export class AppModule {}

    import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MapPage } from '../pages/map/map';
import { ListPage } from '../pages/list/list';
import { DetailPage } from '../pages/detail/detail';
import { Locations } from '../providers/locations';
import { GoogleMaps } from '../providers/google-maps';
import { Connectivity } from '../providers/connectivity';
declare var google: any;

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MapPage,
    ListPage,
    DetailPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MapPage,
    ListPage,
    DetailPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Locations,GoogleMaps, Connectivity]
})
export class AppModule {}

PageA.ts ( list of Data ) 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Locations } from '../../providers/locations';
import { DetailPage } from '../detail/detail';


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


  constructor(public navCtrl: NavController, public locations: Locations) {

  }

  ionViewDidLoad() {
    console.log('Test Si marche');


  }

  viewLocation(event,location) {
    this.navCtrl.push(DetailPage, {
      "title":location.title,
      "longitude":location.longitude
    })
  }

}

Page B ( where i want to get the detail as soon as i click on something on the list ) 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {NavParams} from "ionic-angular";
import { Locations} from '../../providers/locations';
import { ListPage } from '../list/list';





@Component({
    selector: 'page-detail',
    templateUrl: 'detail.html',
    providers: [ Locations ],
    entryComponents:[ ListPage ]
})


export class DetailPage {

    title: string
    latitude: string
    navParams: NavParams

    constructor(navParams: NavParams,public navCtrl: NavController) {
        this.navParams = navParams
        this.title = this.navParams.get('title');
        this.latitude = this.navParams.get('latitude');
    }

    ionViewDidLoad(err) {
        console.log(err);


    }
    goBack() {
        this.navCtrl.pop();
    }

}

listA.html

 <ion-header>

    <ion-navbar color="secondary">
        <ion-title>List</ion-title>
    </ion-navbar>

</ion-header>


<ion-content>

    <ion-list no-lines>

        <ion-item *ngFor="let location of locations.data">

            <ion-item (click)="viewLocation($event, locations)">{{locations.title}}</ion-item>
            <ion-avatar item-left>
                <ion-icon name="pin"></ion-icon>
            </ion-avatar>
            <!--<img src="./src/pics/mus.png"/>-->
            <h2>{{location.title}}</h2>
            <p>{{location.distance*1.609}} Km</p>
        </ion-item>

    </ion-list>

</ion-content>

data.json

  [
  { "title": "Cat", "longitude": "14,57" },
  { "title": "Bird", "longitude": "17.45" },
  { "title": "Spider", "longitude": "19,12" }
]

Upvotes: 3

Views: 1991

Answers (1)

Gene
Gene

Reputation: 2218

If you want to pass data from one page to another, you can either

1) Store your JSON data in SQL format via JSON.stringify(store) and JSON.parse(retrieving) method.

Meaning you stringify the data, before storing inside the SQL table and once retrieved from the next page, you do a JSON.parse to get back your JSON object.

You may want to read up on the following article on how to store data in SQL. SQL Ionic 2

JSON Parse

JSON Stringify

Or either which, 2) you can make use of navController to "push" data from one page to another. One downside would be if your JSON data is huge, you will have to slowly iterate through.

A simple example would be:

this.navController.push(ThePageNameYouWannaGo, {
      firstPassed: "firstData",
      secondPassed: "secondData",
      thirdPassed: "thirdData",
});


//On the next page (at your constructor),

Constructor(....,NavParams,.....){

  this.first = navParams.get("firstPassed");
  this.second= navParams.get("secondPassed");
  this.third= navParams.get("thirdPassed");

//the value would be stored inside this.first, this.second respectively

For your case, I would recommend method 1 as I have no clue how big is your JSON file and to make your life easier in the future when your JSON file changes.

Upvotes: 4

Related Questions