What is the best way to merge properties from two separate JavaScript objects?

Question

I have a javascript object that I would like to update with data from another object. I want to add new things from the new object, update old things using the new object and leave alone anything in the old object that is not in the new object. (Example at the bottom)

I have tried various ways but they either overwrite the object completely or they do not cascade without manually writing out loops for objects in objects in objects, etc.

I have also thought about a recursive function that will iterate over the properties, check if it has another object inside itself and if it does call itself all while updating the object. (have not written it, in hopes of something cleaner)

var obj1 = {id:1, name:"asdf", info:{first:3, second:{deeper:3} } };

var obj2 = {id:1, info:{first: 3, second:{deeper:5, new_deeper:6}, third:7}, new_info:7};

I would like to make it so obj1 be equivalent to:

{id:1, name:"asdf", info:{first:3, second:{deeper:5, new_deeper:6}, third:7}, new_info:7};

Thank you in advance!

Answer 1

I know suggesting a library isn't always a great answer, but jQuery has an $.extend method that is killer for doing this.

// Add TRUE as the last parameter to copy nested objects
var newObj = $.extend(objectA, objectB, true);

If you check the library you could grab just that functionality and use it for your own stuff.

http://code.jquery.com/jquery-1.7.1.js

jQuery.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // extend jQuery itself if only one argument is passed
    if ( length === i ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};