Why update value data in modal with effect value data in parent view

Hi, I’m start to use ionic2 on my project and I create on page calle “menus page” show list of food. Once use tap the list, it will pop modal that make user select special request on selected dish.

I pass data from “menus page” to modal and it show perfectly. After user select special request, I need to to clean up special request form (everything should unselected ) but I look like the data from modal update the data in “menus page” and when I open modal (the same dish), all of previous special request selected.

I don’t know why changing value on modal page will effect data in “menus page”.

Please tell me what I need to do.

This is my code in “menus page”

ionViewDidLoad(){

    //check basket empty
    var init = this.basketService.getBasket().then(basket=>{
      if(!basket){
        this.basket = [];
      }
      else{
        this.basket = basket;
      }
    });

    Promise.all([init]).then(()=> {
      
      this.sampleMenus = [{category:{name:"เมนูข้าว"}, list: [ {id:1, code:'BASE100', name:'Sample Meal 1 | ชุดอาหาร 1', detail:'ชุดอาหารสุดคุ้มจาก Halalize™ ให้คุณเลือกระหว่างเนื้อสัตว์ชนิดต่างๆ  และผัดสด', image:'assets/wireframe/food.jpg', price:{value:100, unit:'฿'}, choices:this.sampleChoices, addons:[], basket:{quantity:0}}] },
                          {category:{name:"ก๋วยเตี๋ยว"}, list: [{id:2, code:'BASE101', name:'Beef Noodle | ก๋วยเตี๋ยวเนื้อ', detail:'ก๋วยเตี๋ยวเนื้อสูตรลับเฉาะของทางร้าน', image:'assets/wireframe/noodle.jpg', price:{value:70, unit:'฿'}, choices:this.noodleChoices_2, addons:this.noodleAddons, basket:{quantity:0}}, {id:3, code:'BASE102', name:'Chicken Noodle | ก๋วยเตี๋ยวไก่', image:'assets/wireframe/food.jpg', price:{value:50, unit:'฿'}, choices:this.noodleChoices_1, addons:this.noodleAddons, basket:{ quantity:0 }}]},
                          {category:{name:"เมนูผัด"}, list: [{id:4, code:'BASE103', name:'ผัดเนื้อน้ำมันหอย', image:'assets/wireframe/food.jpg', price:{value:120, unit:'฿'}, choices:[], basket:{quantity:0}},{id:5, code:'BASE104', name:'ผัดเต้าหู้', image:'assets/wireframe/food.jpg', price:{value:80, unit:'฿'}, choices:[], basket:{quantity:0}}]}];

      this.summarizeBasket();

    });

  }

selectMenu($e, group_index, list_index){

    var selectedItem = this.sampleMenus[group_index].list[list_index];
    //has choices - popup modal
    if(selectedItem.choices.length>0){
      this.openChoicesModal(selectedItem)
    }
    else{
      this.addToBasket(this.sampleMenus[group_index].list[list_index]);
    }

  }


openChoicesModal(dish){
    var params = { dish:dish };
    // pass data to modal
    var choicesModal = this.modalCtrl.create(MenusChoicesModalPage, params);

    choicesModal.present();
    choicesModal.onDidDismiss(() => {
      //just call summarizeBasket function
      this.summarizeBasket();
    });
  }

and this is modal page code

export class MenusChoicesModalPage {

  //receive data from menus page
  private dish: any = this.navParams.get('dish');
  private choices: Array<any>;
  .....
 ionViewDidLoad() {
    
    this.choices = this.dish.choices;
    
  }

 //close modal after add item to basket
 closeModal() {
    this.viewCtrl.dismiss();
  }
....

my question is why this.choices in modal page change, this.sampleMenus in menus page alway change? How can I unlink it.

Thank you

JavaScript is a horrible language. You can look at Object.assign or if that’s not sufficient, lodash has a deep clone.

I think so. Do you have any idea how to reset/clear modal after after close?

Can you explain how the two I gave years ago did not meet your needs?