couldnt pass an array between two pages

Question

Am new to ionic, and am currently stuck in this problem, I'm trying to pass an object that have this structure

{
car: {...}
reservations:[{...},{...},...]
}

I did this code but a was able to send only the car object but couldnt send the reservation array.

page1 (sender):

  //class success object

  class SuccessObject {
    success: any;

    public constructor(success: any) {
        this.success = success;
    }
  }
  public getCar(id){
    let loader = this.loading.get('Chargement de la reservation...');
    loader.present();
    this.data.getCar(id).subscribe(
        data => {
          //DATA is full with car infos and its reservations
          let infos: SuccessObject = new SuccessObject(data);
            this.navCtrl.push(CarinfosPage, {
                'car': infos.success.car,
                'res': infos.success.reservation,
            });
            loader.dismiss();
        },
        err => {
            loader.dismiss();
        }
    );  
  }

page 2 (reciever):

export class CarinfosPage {

  public data;
  reservations = <any>{};
  car = <any>{};

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.reservations = this.navParams.data;
    this.car = this.navParams.get('car');
  }

  ionViewDidLoad() {
    console.log(this.car); // i get car infos here
    console.log(this.reservations); // i get undefined here
  }

}

Your data has: `resevations`, but you are trying to use `reservation` — AT82, Aug 06 '19 at 10:42
@AJT_82 i edited the post, just a mistake when i was writing — S4L4H, Aug 06 '19 at 10:45
What happens if you use `this.reservations = this.navParams.get('reservations'); `? — Andrew Hill, Aug 06 '19 at 11:22

score 3 · Accepted Answer · answered Aug 06 '19 at 12:18

3

you didn't get this.navParams.get('res');

    this.reservations = this.navParams.get('res');


 ionViewDidLoad() {
    console.log(this.car); // i get car infos here
    console.log(this.reservations); // i get undefined here
  }

answered Aug 06 '19 at 12:18

Chanaka Weerasinghe

5,404
2
26
39

score 1 · Answer 2 · answered Aug 06 '19 at 13:04

Instead of passing the big payload of an array to the second page through the router, an alternative is send just the id; then have a data service that will be used by the second page to retrieve the data and get all the information that it needs.

Page 1 (sender)

  public getCar(id){
     this.navCtrl.push(CarinfosPage, { id: id });
  }

Page 2 (receiver):

export class CarinfosPage implements OnInit {
  public data;
  reservations = <any>{};
  car = <any>{};

  // TODO inject the data service
  constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      public dataService: DataService
  ) {}

 ngOnInit() {
    const id = this.navParams.get('id');

    this.dataService.getCar(id).subscribe(
        data => {
         // TODO Get the car and reservations information here
          ...
        },
        err => {
           ...
        }
    );  
 }
}

couldnt pass an array between two pages

2 Answers2