Changes to passed data in a modal are showing up in parent?

Ionic Framework ionic-v3
1

Hey everyone,

I’m having the weirdest thing happen. So I have a page that when you click on a button, it brings up a modal, which contains a different page. From the parent page, I open the modal and pass in some data appropriately like so:

let modal = this.modalCtrl.create(ManageVideos, { videos: this.user.videos});
    modal.present();

In my modal page, I’m grabbing the videos from the NavParams and populating a variable:

constructor(
    public navCtrl: NavController,
    public params: NavParams,
    private viewCtrl: ViewController,
  ) {

    this.videos.added = this.params.data.videos;
  }

However, if I change anything inside of any of the objects inside of the this.videos.added object, those changes also get reflected in the objects that are coming from the parent page.

Does anyone have any idea why this would be happening?

2

Because Brandon Eich wanted it that way. Whenever you pass objects around in JavaScript, they are effectively passed by reference, so modifications made to them anywhere are reflected everywhere.

3

Modal cannot edit original data before commit changes, so you have to make deep copy of the passed object and assign it back only on commit.