CODEWITHSUNDEEP
javascriptd3.js
gatech-kid
gatech-kid

Reputation: 67

JavaScript object randomly changed?

<script>
var jsonObject;
d3.json("d3ready.json", function(error, data) {
  if (error) return console.warn(error);
  jsonObject = data;
  var data1 = createGraph(0,4,data);
  draw(data1);
});
</script>
<script>
function onsubmit1(){
  console.log("jsonObject is " + JSON.stringify(jsonObject));
  console.log();
  var data1 = createGraph(parseInt($("#min")[0].value, 10),parseInt($("#max")[0].value, 10),jsonObject);
  draw(data1);
};

I logged JSON.stringify(data) within createGraph, this is data

"{"nodes":[{"name":"102.23.56.54","group":5},{"name":"14.89.156.255","group":5},{"name":"54.89.156.255","group":5},{"name":"194.66.82.11","group":5},{"name":"94.6.82.111","group":5},{"name":"77.99.88.66","group":5},{"name":"4.90.49.255","group":5},{"name":"Client0","group":0},{"name":"Client1","group":0},{"name":"Client2","group":0},{"name":"Client3","group":0},{"name":"Client4","group":0},{"name":"Client5","group":0},{"name":"Client6","group":0},{"name":"Client7","group":0},{"name":"Client8","group":0}],"links":[{"source":0,"target":7,"event_time":1},{"source":1,"target":8,"event_time":3}]}"

This is from the first line within onsubmit(), i.e. jsonObject

"{"nodes":[{"name":"102.23.56.54","group":5,"index":0,"weight":1,"x":299.94526826471133,"y":277.7841744491975,"px":299.9327761798027,"py":277.7772499258768},{"name":"14.89.156.255","group":5,"index":2,"weight":1,"x":277.75596186872986,"y":200.05253033301608,"px":277.7489723293299,"py":200.06505833142455},{"name":"54.89.156.255","group":5},{"name":"194.66.82.11","group":5},{"name":"94.6.82.111","group":5},{"name":"77.99.88.66","group":5},{"name":"4.90.49.255","group":5},{"name":"Client0","group":0,"index":1,"weight":1,"x":200.08265242701665,"y":222.19732778914582,"px":200.09529372175797,"py":222.20415356195323},{"name":"Client1","group":0,"index":3,"weight":1,"x":222.26526337005697,"y":299.96860427614854,"px":222.2723662415275,"py":299.9561891107354},{"name":"Client2","group":0},{"name":"Client3","group":0},{"name":"Client4","group":0},{"name":"Client5","group":0},{"name":"Client6","group":0},{"name":"Client7","group":0},{"name":"Client8","group":0}],"links":[{"source":0,"target":7,"event_time":1},{"source":1,"target":8,"event_time":3}]}"

There is a huge difference between data and jsonObject but I defined jsonObject =data. I'd appreciate any help in figuring out why ?

Thanks, if you want to see the context, here's the plunkr link

Upvotes: 1

Views: 139

Answers (1)

Jagadish G
Jagadish G

Reputation: 681

That's because you are populating new graph object (graph1) in createGraph function with node objects of the data object you are passing in.

In other words, you are not deep copying the node object into new graph object, you are just copying the object reference in the following code from createGraph.js. And this newly created graph object is modified by d3 which in turn modifies the node object in original data set.

graph1.nodes.push(graph.nodes[graph.links[i].source]);

If you want the original data object remain unchanged, modify the below line

var data1 = createGraph(0,4,data);

into

var data1 = createGraph(0,4, JSON.parse(JSON.stringify(data)));

You shouldn't see the data change in the original object anymore. So what is happening here? JSON.parse(JSON.stringify(data)) is dirty workaround to deep copy an object. This creates entirely duplicate copy of data object.

Upvotes: 1

Related Questions