Question

I am trying to merge each object in an array of objects (that are all object literals) with a "prototype" that is an also an object literal:

var objArray = [{
    first: 123,
    second: "asd",
    third: function () {
        alert("hello");
    },
    items: {
        color: "brown",
        number: 10
    }
}, {
    first: 765,
    second: "lkj",
    third: function () {
        alert("goodbye");
    },
    items: {
        color: "yellow",
        number: 999
    }
}];

var obj2 = {
    first: 143,
    items: {
        color: "blue",
        number: false
    }
};

var combinedObjArray = [];


var i;
for (i = 0; i < objArray.length; i += 1) {
    var newObj = $.extend(true, obj2, objArray[i]);
    combinedObjArray.push(newObj);
}

alert(JSON.stringify(combinedObjArray));​

My issue is that "newObj" just creates a pointer, instead of creating unique objects (I think):

http://jsfiddle.net/RbabL/

Answer 1

This line…

var newObj = $.extend(true, obj2, objArray[i]);

… should actually be written as …

var newObj = $.extend(true, {}, obj2, objArray[i]);

… otherwise you’ll augment an obj2 each time it’s called:

Keep in mind that the target object (first argument) [or second argument, when deep param is used] will be modified,
and will also be returned from $.extend(). If, however, we want to
preserve both of the original objects, we can do so by passing an
empty object as the target:

var object = $.extend(true, {}, object1, object2);