Angular - modify object inside subscribe

Question

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

}

Andreas · Accepted Answer · 2019-07-08 13:00:51Z

1

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

answered Jul 8, 2019 at 13:00

Andreas

465 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fjc Over a year ago

Your explanation is correct, I just want to warn to be careful using Object.assign or the spread operator (const noRealCopy = {...original};): When you have objects as properties, they continue to be referenced rather than copied. Example: typescriptlang.org/play/#code/…

fjc · Accepted Answer · 2019-07-08 13:00:07Z

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.

Collectives™ on Stack Overflow

Angular - modify object inside subscribe

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related