getting data from server and passing it around pages Angular

Question

I have a service that fetches data from an api endpoint in my ionic app. Here is the function that gets data from the server.

getDriverInfo(username)
{
return this.http.get(this.base_url + 'user/' + username, {
  headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.access_token)
});
}

i have a page that gets the data is responds with.

 handleResponse(data) {

  this.db.getDriverInfo(data.username).subscribe(
          resp => {
              this.driverData = resp;
              this.driverId = this.driverData.driver.id;
              this.driverUserid = this.driverData.id;
              console.log(this.driverData);
          }
  );
  this.token.handle(data.access_token);
  this.navCtrl.setRoot(HomePage, {
        driverData: this.driverData,
        driverId: this.driverId,
        driverUserId: this.driverUserId
  });
}

toDash()
{
let loading = this.loadCtrl.create({
  content:'Logging In...'
});

loading.present();

this.auth.login(this.form).subscribe(
 data => { 
   this.handleResponse(data);
    loading.dismiss();
 },
 error => { 
   this.handleError(error);
 loading.dismiss();
 }
);

}

console.log() this.driverData gives me the data.

in my homePage i try to save the data in variables like so

 constructor(public navCtrl: NavController, public platform: Platform,
          public geo: Geolocation, public loadingCtrl: LoadingController,
          public driverProvider: DriverProvider, public alertCtrl: AlertController,
          public navParams: NavParams, public modalCtrl: ModalController, public db: DbProvider
          ) {
            this.driverDetails = this.navParams.get('driver_data');
            this.driverUserId = this.navParams.get('driver_user_id');
            this.driverDBId = this.navParams.get('driver_id');
            this.isOnline = this.navParams.get('isOnline');
            console.log(this.driverDetails);
          }

but console.log gives me undefined. How can i pass the data around efficiently?

Answer 1

In the HomePage change the following:

this.driverDetails = this.navParams.get('driver_data');

into this:

 this.driverDetails = this.navParams.get('driverData');

When you are sending the data to the second page, you are using the attribute driverData, thus to recieve this attribute you need to add it exactly the same in the get()

To get all the data, you can do the following inside the constructor:

this.allData = this.navParams.data;
console.log(this.allData);

Check the docs here for more information.