Question

I’ve looked into the many posts here regarding cloning and copying javascript objects, notably, these two topics:

• How do I correctly clone a JavaScript object?
• What is the most efficient way to deep clone an object in JavaScript?

It seems like it’s not working for me, though.

Here is a snippet of code I’m using:

var copiedObject = {};

$.getJSON(URL, null, function (data) {
     copiedObject = jQuery.extend(true, {}, data);
});

console.log(JSON.stringify(copiedObject));

If I have my console log function within the JSON call, it outputs the proper values, but after the function, it’s emptied out, and outputs {}.

I’ve tried using copiedObject = JSON.parse(JSON.stringify(data)), as well as the clone(obj) function from the “Copying an object in Javascript” post, all to no avail.

Am I missing something?

Answer 1

$.getJSON fires an Ajax request, which by default runs asyncronous. Your console.log will fire before the request has finished. Fix it by moving the console output into the callback.

$.getJSON(URL, null, function (data) {
     copiedObject = jQuery.extend(true, {}, data);
     console.log(JSON.stringify(copiedObject));
});