In this example you will see how to use deep copy and shallow copy an object using jQuery. By using extend method you can copy an original object to another object.
Syntax
Deep copy
var deepCopyObject = jQuery.extend(true, new Object(), Obj);
Shallow copy
var shallowCopyObject = jQuery.extend(new Object(), Obj);
Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Copy an Object using jQuery </title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var Obj = { "size": 4,
"color": "#EAEAEA",
"seq": [5, 6, 7, 8],
"Information": {
"firstName": "Aamir",
"lastName": "Ha",
"Details": { "Gender": "Male", "Location": "PK" }
}
};
/* Deep copy*/
var deepCopyObject = jQuery.extend(true, new Object(), Obj);
deepCopyObject.Information.Details.Location = "PAK";
//alert("Obj.Information.Details.Location => " + Obj.Information.Details.Location);
//alert("deepCopyObject.Information.Details.Location => "
+ deepCopyObject.Information.Details.Location);
$("#msg").append("<b>Orignal Object</b> > Obj.Information.Details.Location => <b>"
+ Obj.Information.Details.Location + "</b><br>");
$("#msg").append("<b>Copied Object</b> > deepCopyObject.Information.Details.Location => <b>"
+ deepCopyObject.Information.Details.Location + "</b><br><br>");
deepCopyObject.Information.lastName = "Hasan";
//alert("Obj.Information.firstName => " + Obj.Information.lastName.toString());
//alert("deepCopyObject.Information.Details.Location => "
+ deepCopyObject.Information.lastName.toString());
$("#msg").append("<b>Orignal Object</b> > Obj.Information.firstName => <b>"
+ Obj.Information.lastName.toString() + "</b><br>");
$("#msg").append("<b>Copied Object</b> > deepCopyObject.Information.Details.Location => <b>"
+ deepCopyObject.Information.lastName.toString() + "</b><br>");
var shallowCopyObject = jQuery.extend(new Object(), Obj);
shallowCopyObject.Information.Details.Location = "PAK";
//alert("Obj.Information.Details.Location => " + Obj.Information.Details.Location);
//alert("shallowCopyObject.Information.Details.Location => "
+ shallowCopyObject.Information.Details.Location);
$("#msgShallow").append("<b>Orignal Object</b> > Obj.Information.Details.Location => <b>"
+ Obj.Information.Details.Location + "</b><br>");
$("#msgShallow").append("<b>Copied Object</b> > shallowCopyObject.Information.Details.Location => <b>"
+ shallowCopyObject.Information.Details.Location + "</b><br><br>");
shallowCopyObject.Information.lastName = "Hasan";
//alert("Obj.Information.firstName => " + Obj.Information.lastName.toString());
//alert("shallowCopyObject.Information.Details.Location => "
+ shallowCopyObject.Information.lastName.toString());
$("#msgShallow").append("<b>Orignal Object</b> > Obj.Information.firstName => <b>"
+ Obj.Information.lastName.toString() + "</b><br>");
$("#msgShallow").append("<b>Copied Object</b> > shallowCopyObject.Information.Details.Location => <b>"
+ shallowCopyObject.Information.lastName.toString() + "</b><br>");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Deep copy an Object</h1>
<div id="msg"> </div>
<h1>Shallow copy an Object</h1>
<div id="msgShallow"> </div>
</div>
</form>
</body>
</html>
Output
Download
Deep and Shallow Copy an Object.rar (43.58 kb)
See live demo