Passing Json Data to Second Page for Audio player


#1

Hi , Please can someone help me with this implementation of Media Player fetching from Remote Json. I’m using this Remote data to list Artist, Image but want to pass Audio URL to Player page. Any suggestion on how to implement this?


#2

You can either use Navigation Params to pass the data on to the Player page or create some sort of Helper component, which you load in your app.component.ts constructor and pass on to the various pages that need to access temporary data.

The Ionic Documentation has everything you need to start using NavParams. => http://ionicframework.com/docs/api/navigation/NavParams/


#3

Thanks @duke1102 for looking to this. I tried using navCtrl to push the Second and pass the Json data along like below

    this.navCtrl.push(SecondPage, this.newsData);
    console.log(this.newsData.title);
  }

and navParams to get the Passed data with below code

    console.log(this.navParams.get('Link'));
  }

Any time I click the Launch function to access the data passed I get Undefined in Console.


#4

try with localStorage , exemple :

insert your link in any page

localStorage.setItem('ValName',YourVar);

get your link in another page

localStorage.getItem('ValName');


#5

Hey. Try changing your push to like this:

this.navCtrl.push(SecondPage, { Link: this.newsData });

This way you make sure the data gets passed over with the identifier Link which you try to get with your navParams.get(‘Link’) call.

You can also provide more than only one Parameter like so:

this.navCtrl.push(SecondPage, { Param1: this.stuff, Param2: this.morestuff, Param3: this.evenmorestuff });

@guadyass
In my experience that doesn’t work so well and also the way you describe it is rather… old. I saw this localStorage stuff in an old V1 app, but it didn’t work at all in V3.
For Ionic >=2 I found a pretty decent example for using the local storage of your browser in one of the example projects.
https://github.com/ionic-team/ionic-starter-super/blob/master/src/providers/settings.ts

It basically uses Promises when you try to get a value. Another important thing is to make sure that the local storage is actually ready and initialised, before reading/writing it.
Easiest way is to just check that in the app.component.ts after Platform.ready().


#6

@duke1102 Thank for time. I just tried this and The undefined I got from solved if I’m correct. So I tried logging this to console

console.log(this.navParams.get('Link'));

Unfortunately I couldn’t I couldn’t see anything from console.
Thanks once Again


#7

You can’t just blindly copy stuff. NavParams must be injected in the page’s controller:

class SecondPage {
  constructor(np: NavParams) {
    console.log(np.get('Link'));
  }
}