How can I make a push with a variable?

Question

Hello I have a problem when I use the method push in JavaScript. I'm making a push of an object and in each push I change just some attributes of the object. My problem is that when I look at the array it give me an array of objects with the attributes of the last assign.

When I look at the variable Panel at this point I get an array of two position of the same value. This value is an object with my last assign.

 var ARGS = { "var-Instalation":"vi"}; var Panel = new Array(); var ParamsSingleStat = { "datasource": "influxdb", "targets": [{ "groupBy": [], "measurement": "mqtt_consumer", "select": [ [{ "params": [ "value" ], "type": "field" }] ], "tags": [{ "key": "topic", "operator": "=", "value": "" }] }], "title": "", "type": "singlestat", } var PanelConfStatus = ParamsSingleStat; var PanelAppStatus = ParamsSingleStat; PanelAppStatus.targets[0].tags[0].value = "Instalacion/" + ARGS["var-Instalation"] + "/ECCE/EstadoApp" PanelAppStatus.title = "Estado Aplicacion" Panel.push(PanelAppStatus); console.log(Panel) PanelConfStatus.targets[0].tags[0].value = "Instalacion/" + ARGS["var-Instalation"] + "/ECCE/EstadoConfiguracion" PanelConfStatus.title = "Estado Configuracion" Panel.push(PanelConfStatus);

Answer 1

The reason why you're getting the last assignment is because in JavaScript, objects are passed by reference. You can clone it though and push the clone to the array. You can clone using Object.assign() but given the complexity of object, I don't think it's sufficient enough as Object.assign() will only shallow clone your object. I can only suggest using lodash for deep cloning

Object.assign()

Answer 2

You have assigned the same variable ParamsSingleStat to both PanelConfStatus and PanelAppStatus . Since JS is call by reference, you are essentially updating the same variable twice. You must use JSON.parse or similar to create a copy. Eg:

var PanelConfStatus = JSON.parse(JSON.stringify(ParamsSingleStat));
var PanelAppStatus = JSON.parse(JSON.stringify(ParamsSingleStat));

This will give you different values for both.

Answer 3

The problem is you have mutated the value at the end thus the prev value is changed as well.

You can use object spread to get the new object of ParamsSingleStat and then mutate it

 var PanelConfStatus = {...ParamsSingleStat};
 var PanelAppStatus = {...ParamsSingleStat};

Answer 4

You need to clone the ParamsSingleStat object, otherwise PanelConfStatus and PanelAppStatus will be references pointing to the same object, so when you're chaning one, you change "the other" as well. The var assignment should look something like this:

var PanelConfStatus = Object.assign({}, ParamsSingleStat);
var PanelAppStatus = Object.assign({}, ParamsSingleStat);

I'm sure there are plenty of other ways of doing it, this is what I came up with on the spot, but you can search for object cloning.

Also, worth to note, it's recommended to use let instead of var (unless you don't plan to transpile your code; though most modern browsers accept let, I'd hope)

Answer 5

That's because you use object reference you need to use following:

 var PanelConfStatus = Object.assign({}, ParamsSingleStat);
 var PanelAppStatus =  Object.assign({}, ParamsSingleStat);

Answer 6

Your variables PanelConfStatus and PanelAppStatus are pointing the same instance of value from ParamsSingleStat . This is done from lines:

var PanelConfStatus = ParamsSingleStat;
var PanelAppStatus = ParamsSingleStat;

Instead of the code above. Create a copy/clone of ParamsSingleStat . Example, Make use of Object.assign({}, yourObjectToCopy) . Replace the two lines above with this:

var PanelConfStatus = Object.assign({}, ParamsSingleStat);
var PanelAppStatus = Object.assign({}, ParamsSingleStat);

This way, your variables will have their own copies of the object and can be modified independently.