How to efficiently merge two arrays in Javascript?

Question

Lets say I've got two arrays of objects in Javascript:

var myList = [{id: 3, info: 'bla'}, {id: 97, info: 'ble'}, {id: 25, info: 'blu'}];
var newList = [{id: 5, info: 'blo'}, {id: 3, info: 'different Info!!'}];

I now want to "merge" the newList into myList, in the sense that:

all objects with an id already present in myList, should be replaced by the object in newList
all objects with an id not present in myList, should be added from newList to myList

I don't understand however, how I can check if an object with a certain id is already in the array. I guess you could do a loop over myList for every item in newList, but that is not very scalable.

Does anybody know how I can efficiently do this? All tips are welcome!

keep track of it when you create the array using a flag - otherwise you'd have to loop — nicholaswmin, Nov 26 '14 at 10:58
Do an initial loop on one of the arrays and create a new object using the id as the key ;) — Jonathan Gray, Nov 26 '14 at 10:58
i think this link might help you http://stackoverflow.com/questions/1334660/combining-javascript-objects-into-one/1334710#1334710 — Rudresha Parameshappa, Nov 26 '14 at 11:59

score 1 · Answer 1 · answered Nov 26 '14 at 11:08

You can use an object to make sure the ID's are unique, and that would automatically overwrite the existing ID's, and then convert it back to an array

var myList  = [{id: 5, info: 'bla'}, {id: 97, info: 'ble'}, {id: 25, info: 'blu'}];
var newList = [{id: 5, info: 'blo'}, {id: 3, info: 'different Info!!'}];
    
var o      = {};
var newArr = [];
    
myList.forEach(function(x) {
    o[x.id] = x;
});
    
newList.forEach(function(x) {
    o[x.id] = x;
});
    
for (var key in o) {
    newArr.push(o[key])
}

document.body.innerHTML = '<pre>' + JSON.stringify(newArr, null, 4) + '</pre>';

score 1 · Accepted Answer · answered Nov 26 '14 at 11:10

Try:

function combineArray(array1, array2) {
    var arr = array1.concat(array2);

    for(var i = 0; i < arr.length; ++i) {
        for(var j = i + 1; j < arr.length; ++j) {
            if(arr[i].id === arr[j].id)
                arr.splice(i, 1);
        }
    }

    return arr;
};

Then

combineArray([{id: 3, info: 'bla'}, {id: 97, info: 'ble'}, {id: 25, info: 'blu'}], [{id: 5, info: 'blo'}, {id: 3, info: 'different Info!!'}] );

returns

[Object { id=97, info="ble"}, Object { id=25, info="blu"}, Object { id=5, info="blo"}, Object { id=3, info="different Info!!"}]

score 0 · Answer 3 · edited May 23 '17 at 10:33

I am sorry to say that you will have to do some sort of itteration to compare your ID's. You could Do an itteration over the first array of objects to get the ID attribute of every element. Inside this itteration you could do another itteration over the merging array comparing values and push your desired values to a new "result" array.

Maybe this could help you to keep your code tidy with the nested itterations:

Find a value in an array of objects in Javascript

Hope this helped.

score 0 · Answer 4 · answered Nov 26 '14 at 11:09

You can loop through the newList checking if myList has the object with such id. If it does, replace the old one with a new using splice, otherwise push new object into myList.

var myList = [{id: 3, info: 'bla'}, {id: 97, info: 'ble'}, {id: 25, info: 'blu'}];
var newList = [{id: 5, info: 'blo'}, {id: 3, info: 'different Info!!'}];

newList.forEach(function(el) {

    var found = myList.filter(function(obj) {
        return obj.id == el.id;
    });

    if (found.length) {
        myList.splice(myList.indexOf(found[0]), 1, el);
    }
    else {
        myList.push(el);
    }
});

alert( JSON.stringify(myList, null, '\t') );

Sampath Liyanage · Answer 5 · 2014-11-26T11:57:25.340

You can use array.prototype.concat() and array.prototype.filter() methods for this..

var myList = [{id: 3, info: 'bla'}, {id: 97, info: 'ble'}, {id: 25, info: 'blu'}];
var newList = [{id: 5, info: 'blo'}, {id: 3, info: 'different Info!!'}];
var temp = {};
var output = newList.concat(myList).filter(function(v){
    if (temp[v.id]){
        return false;
    }
    temp[v.id] = true;
    return true;
});

console.log(output);

How to efficiently merge two arrays in Javascript?

5 Answers5