Ionic 3 Passing objects using navparams to 3 pages

I am an absolute beginner and am self taught using Ionic3 I have a problem that is driving me wild that I hope someone can assist on.

I have a master-detail-detail setup where the following happens: Master page has a list of reports (taken from a JSON file), click on that report and it takes to a details page, click on that and it opens up another page with even more details, without having to define all the individual parts.

All I want to do is simply pass the whole object from the second page to the third page so that I can use its parameters again

master page (Report), Second page (Reportmenu), Third page (GenOverview)

So passing between master and second page is fine and works as it should using navparams (not shown here) but I want to use that same object and pass all the data again to the 3rd page. I thought it would be just as simple as assigning it to a new variable and then passing that again using navparams but I get undefined

export class ReportmenuPage {

name: any;
overallscore: any;
reportdate: any;
coach: any;
age: any;
TechOverall: any;
TactOverall: any;
PhysOverall: any;
PsychOverall: any;
Logo: any;
data2: any;

constructor(public navCtrl: NavController, public navParams: NavParams, 
public postsService: Posts, private toastCtrl: ToastController) {

this.overallscore = this.navParams.get('OverallScore');
this.reportdate = this.navParams.get('ReportDate');
this.name = this.navParams.get('Name');
this.coach = this.navParams.get('Coach');
this.age = this.navParams.get('Age');
this.TechOverall = this.navParams.get('TechOverall');
this.TactOverall = this.navParams.get('TactOverall');
this.PhysOverall = this.navParams.get('PhysOverall');
this.PsychOverall = this.navParams.get('PsychOverall');
this.Logo = this.navParams.get('Logo');
console.log(this.navParams.data);
this.data2 = this.navParams.data;


 }

 myClickHandlerOverview(data2) {
    this.navCtrl.push(GenOverviewPage, data2); 

So this is all fine and gives an expected output So all I want to do now is get this to the GenOverviewPage

  Here is the Reportmenu.html

      <ion-item (click)="myClickHandlerOverview(data2)" color="primary">
        <ion-icon name="arrow-dropright" item-end></ion-icon>
        GENERAL OVERVIEW
      </ion-item>

And Finally the bit that doesn't work

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ReportmenuPage } from '../reportmenu/reportmenu';


@IonicPage()
@Component({
  selector: 'page-gen-overview',
  templateUrl: 'gen-overview.html',
})
export class GenOverviewPage {

 constructor(public navCtrl: NavController, public navParams: NavParams) {

   let data3 = this.navParams.data;
   console.log(data3); //this shows as {}



  }

   ionViewDidLoad() {
   console.log('ionViewDidLoad GenOverviewPage');
 }

}

I am pretty certain I am going to get ridiculed as I think this relates to my lack of understanding of objects/ arrays and how they are passed, but I have searched high and low and cannot grasp what I am doing wrong.

and why console.log(data3) shows the second empty array but as you can see I can transfer it fine between page 1 and 2

Many thanks

In your second page, you are saving the data in a local variable that is contained within your constructor.

let data2 = this.navParams.data;

You need to save it in the class variable to be passed to your myClickHandlerOverview. Change it to:

this.data2 = this.navParams.data;

Also may need to change datatype from array to object or any.

 data2: any;

A better approach seems to be to store it in a common provider.