Unexpected data changing when navigate between pages

Ionic Framework ionic-v3
1

Hi there, I’m new to ionic and got a problem with unexpected data changing while switch between pages.

The app consists of the following components:

  • A service for local storage, data in an array of objects. When starting the app, the array in the service will be filled from storage.
  • A list page, which contains an array of the same type as in the service. On ionViewDidEnter, the array will be filled with the values from the array of the storage-service, then displays the values in a list.
  • A detail page, which contains a variable for the object to display. The page contains ion-items as input fields for the values of the object, two way-binding with ngModel. In the navbar there’s a button, which calls a saveButtonClicked() for saving the changes at the object by calling the corresponding function of the service. When using the back-button of the navbar, the app should return to the list view without any changes at the object.

Now to my issue:
The list view shows the values from the array correct. When tapping an entry, the detail page opens and shows the values of the list entry correct in the fields of the page. When using the back-button after editing a value, the app returns to the list view, but instead to “forget” the changes, the changed value is now stored in the corresponding object in the array of the list page. This change seems to happen not only in the array of the list page, the object in the array of the service is also changed. Only the values of the local storage are unchanged.

I tried some different ways to solve this (private properties, different names of the properties in the components, different ways to push the object from list page to detail page), but none of them worked.

Thank you in advance for any suggestions!

Kind regards
Frank Lichnok

2

There is no such thing as a private property in Javascript. Typescript has a private keyword, but it doesn’t do what private does in C or Java. Variables are always passed by reference. You’re running into a common source of JS bugs. My advice: define objects with interfaces, not classes, and use the operations from the immutable.js library, instead of the default JS operations.

Edit: Also, variables declared with const are not constants. They can still be modified. If you are coming to Typescript from another langage, your intuitions are probably dangerous.

1 Like
3

@franklichnok You must be passing the same object (reference) from the list page to the details page, so when you change some property in the details page, it will be reflected in the list page.

If the object can be serialized (if your object has only properties, without methods, and without circular references, it probably is), then you can clone it and pass the clone reference to the detail page, instead of the original object. You can make the code similar to the following:

public goToDetailPage(item: MyItem) {
	let clone: MyItem = JSON.parse(JSON.stringify(item));
	this.navCtrl.push(DetailPage, { param: clone });
}
1 Like
4

Thank you guys for the answers, both help me to solve this issue. Makes it much more easy when knowing that Typescript is passing by reference instead by value. ; )

Kind regards…