CODEWITHSUNDEEP
typescript
Aymen Kanzari
Aymen Kanzari

Reputation: 2023

Angular - modify object inside subscribe

I have the method getParameters() that returns a setting object, that contains a list of parameters, i implemented code inside subscribe and i added some items in the parameters list, when i display the new object i find that the list has the added items, but the problem is that when i display the returned object i find that it changed too

this.settingService.getParameters().subscribe((setting: Setting) => {
    const settingToSave = setting;

    this.parameters.forEach(element => {
       if (settingToSave.parameters.some(parameter => parameter.parameterId === element.parameterId)) {
          settingToSave.parameters = settingToSave.parameters.filter(parameter => parameter.parameterId != element.parameterId);
       }
        settingToSave.parameters.push(element);
     });

    console.log(settingToSave);
    console.log(setting); // same content as the object settingToSave

}

Upvotes: 0

Views: 628

Answers (2)

Andreas
Andreas

Reputation: 46

In many programming languages when you try to copy an object variable by doing A = B then you are copying the variable by reference and not by value. So any changes made in A will be applied to B and vice versa. If you want to copy an object variable and make changes to it without affecting its original declaration use this (ES6) :

let newObj = Object.assign({}, originalObj);

or in your case replace the line:

const settingToSave = setting; with: let settingToSave = Object.assign({}, setting);

Source used: MDN Object assign

Upvotes: 1

fjc
fjc

Reputation: 5815

By const settingToSave = setting, you are creating a reference, not a copy. Hence, when you modify properties of settingToSave, you are modifying the same object as when modifying setting directly.

A simple example that shows the difference between a reference and a copy (in this case, I am creating a copy using JSON.parse(JSON.stringify(...)), which I would not recommend for actual real-life projects):

const original = {"property":"value"};
const reference = original;
const copy = JSON.parse(JSON.stringify(original));

reference.property = "new value";

console.log(reference.property === original.property);
console.log(copy.property !== original.property);

See How to Deep clone in javascript for alternatives.

Upvotes: 1

Related Questions