jQuery Tutorial

How to update existing object properties using new object in jQuery?

« Previous Next »

jQuery extend method

In this blog, let us know how can we change the properties of the existing object (first object) using the properties of subsequent objects in jQuery.

extend method is used to update the existing object properties using the properties of subsequent objects in jquery.

Also helps this method to merge the different objects.

Let us knnow the syntax to use extend method,

var newobject = $.extend(object1, object2);

We are going to see the example jQuery code to update the properties of existing object using properties of new or subsequent objects,

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var obj1 = {"key1": "Testing1", "key2": "Testing2", "key3": "Testing3", "key4": "Testing4"};
            var obj2 = { "key1": "Testing5", "key5": "Testing5" };
            $('#result').append("<p>Before using $.extend method</p>");
            $('#result').append("<hr/>");
            $('#result').append("<p>key1 value in obj1: "+obj1.key1+"</p>");
            $('#result').append("<p>key1 value in obj2: " + obj2.key1 + "</p>");
            $('#result').append("<hr/>");
            var obj3 = $.extend(obj1, obj2);
            $('#result').append("<hr/>");
            $('#result').append("<p>After using $.extend method</p>");
            $('#result').append("<hr/>");
            $('#result').append("<p>key1 value in obj1: " + obj1.key1 + "</p>");
            $('#result').append("<p>key1 value in obj2: " + obj2.key1 + "</p>");
            $('#result').append("<p>key1 value in obj3: " + obj3.key1 + "</p>");
            $('#result').append("<hr/>");
        });
 
    </script>

</head>
<body>
       <div id="result"></div>
</body>
</html>

Output:

In this example, key1 is differnt values in each objects obj1 and obj2, all the objects property 'key1' are same after using extend method.

Let us see the difference in details with properties of each objects,

JSON.stringify method is used to print the properties of object in jQuery.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var obj1 = {"key1": "Testing1", "key2": "Testing2", "key3": "Testing3", "key4": "Testing4"};
            var obj2 = { "key1": "Testing5", "key5": "Testing5" };
            $('#result').append("<p>Before using $.extend method</p>");
            $('#result').append("<hr/>");
            $('#result').append("<p>obj1: " + JSON.stringify(obj1)+"</p>");
            $('#result').append("<p>obj2: " + JSON.stringify(obj2) + "</p>");
            $('#result').append("<hr/>");
            var obj3 = $.extend(obj1, obj2);
            $('#result').append("<hr/>");
            $('#result').append("<p>After using $.extend method</p>");
            $('#result').append("<hr/>");
            $('#result').append("<p>obj1: " + JSON.stringify(obj1) + "</p>");
            $('#result').append("<p>obj2: " + JSON.stringify(obj2) + "</p>");
            $('#result').append("<p>obj3: " + JSON.stringify(obj3) + "</p>");
            $('#result').append("<hr/>");
        });
 
    </script>

</head>
<body>
       <div id="result"></div>
</body>
</html>

Output:

In this example, key1 is differnt values in each objects obj1 and obj2, all the objects property 'key1' are same after using extend method.

« Previous Next »

jQuery Programming Examples

How to update existing object properties using new object in jQuery?

jQuery extend method

Simple Filter HTML Table Rows in jquery

jQuery ui datepicker with disabled date ranges

jQuery ui datepicker change event to submit the form

Getting screen coordinates in jQuery

Getting mouse positions in jQuery

Getting pressed key code in jQuery

Getting multiple elements using tag, id and class in jQuery

Checking element tag in jQuery

Getting element by index in jQuery

Highlights the odd and even rows in different colors in jQuery

Simple Filter HTML Paragraph Tags in jquery

Enable / disable HTML input fields in jQuery

Remove leading and trailing space in text of HTML element using jQuery

jQuery Adding HTML Table Row Dynamically

jQuery Deleting HTML Table Row Dynamically

jQuery Deleting Selected Multiple HTML Table Rows

jQuery Getting Selected Checkbox Values

Update page title using jquery

print objects

Update page title using jquery

print objects