Why all object property's values are changing while populating an object dynamically? Javascript

Question

Note: subObj, subObj2, subObj3, subObj4 are all objects {}

Here is the code:

for (var key in subObj) {
  if (subObj.hasOwnProperty(key)) {
    subObj2 = subObj[key];

    subObj3["player"] = subObj2["player"];
    subObj3["bodypart"] = subObj2["bodypart"];
    subObj3["type"] = subObj2["type"];
    subObj3["result"] = subObj2["result"];
    aux = subObj2["zone"];

    //WARNING: here is the problem. All object content (except keys) are being set to subObj3
    console.log(subObj4); 

    //initialize > important! (this creates new properties in object)
    if (!subObj4.hasOwnProperty(aux)) {
      subObj4[aux] = {};
    }
    if (!subObj4[aux].hasOwnProperty(key)) {
      subObj4[aux][key] = {};
    }

    //store
    subObj4[aux][key] = subObj3;

    console.log("aux = ", aux, " key = ", key);
    console.log(subObj3);
    console.log(subObj4);
  } //endif
} //endfor

Console Logs

current output:

1st loop:

//log of "aux" and "key"
aux = e3c , key = 1

//log of "subObj3"
    {player: "john", bodypart: "h", type: "open_t", result: "correct"}

//log of "subObj4"
    {e3c:{ 
            1:{player: "john", bodypart: "h", type: "open_t", result: "correct"}
        }
    }

2nd loop:

//log of "aux" and "key"
aux = e3c , key = 4

//log of "subObj3"
    {player: "robert", bodypart: "lf", type: "open_t", result: "incorrect"}

//log of "subObj4"
    {e3c:{ 
            1:{player: "robert", bodypart: "lf", type: "open_t", result: "incorrect"}
            4:{player: "robert", bodypart: "lf", type: "open_t", result: "incorrect"}
        }
    }

expected output:

//log of "subObj4"
    {e3c:{ 
            1:{player: "john", bodypart: "h", type: "open_t", result: "correct"}
            4:{player: "robert", bodypart: "lf", type: "open_t", result: "incorrect"}
        }
    }

After more debugging i found were the object is changing its values (its commented in the code with a "Warning"). Is in that line that all the object values change

I believe the issue is that object arrays copy over references rather than values in js. — BStill, Jul 20 '18 at 22:46
@duhaime check Console Logs > current output > 2nd loop > log of "subObj4" . Why im getting that instead of what is in Console Logs > expected output? — K_dev, Jul 20 '18 at 22:47
https://stackoverflow.com/a/12690181/7113839 This answer here can help you with your issue. You want to try to copy over the value of the element rather than the reference when you do this: `subObj3["player"] = subObj2["player"];` — BStill, Jul 20 '18 at 22:47
@BStill do you have some other suggestion in order to achieve what is in the expected output? — K_dev, Jul 20 '18 at 22:49
Try this on each element `subObj3["player"] = JSON.stringify(subObj2["player"]);` and let me know what happens, I just want to test my theory — BStill, Jul 20 '18 at 22:50
Actually I think you just need to replace this `subObj4[aux][key] = subObj3;` with `subObj4[aux][key] = JSON.parse(JSON.stringify(subObj3))`.. That may solve the issue, but I would recommend using jQuery's `extend` like so `subObj4[aux][key] = $.extend(true,{},subObj3);` — BStill, Jul 20 '18 at 23:05

score 1 · Accepted Answer · answered Jul 20 '18 at 22:49

1

Unless you are using some sort of deep copy you are just copying a reference to the original object. See What is the most efficient way to deep clone an object in JavaScript?

answered Jul 20 '18 at 22:49

James

1,514
12
30

1

You should include the relevant info in the answer, rather than just linking to another answer. – jhpratt Jul 20 '18 at 22:58
Depending on which library you are using a deep copy or clone can vary greatly. Jquery has a method, Angular has a method for it, underscore a common library has a method. There are so many ways to actually do the clone/copy that unless additional information was provided I feel like providing a clear reason for the issue was enough to help the developer with his question. – James Jul 21 '18 at 14:10

Why all object property's values are changing while populating an object dynamically? Javascript

Console Logs

current output:

expected output:

1 Answers1