aspx Tutorial

.NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services, .NET articles, Sharepoint 2010, visual studio 2010,Aamir Hasan,IT, Building Your First Web Application Project
Advertise Here

Toolbar

Get our toolbar!

Advertize

Widget TextBox not found.

Object reference not set to an instance of an object.X


Posted by Aamir Hasan   on Friday, April 1, 2011 Total Views:  

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

jQuery.extend( [ deep ], target, object1, [ objectN ] ) //returns Object

 

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">&nbsp;</div>

        <h1>Shallow copy an Object</h1>

        <div id="msgShallow">&nbsp;</div>

    </div>

    </form>

</body>

</html>


Output

Download

Deep and Shallow Copy an Object.rar (43.58 kb)

See live demo

Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5