Navigating & Passing Data Between Pages Ionic 2 - json

Question

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
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" }
]

Answer 1

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.