CODEWITHSUNDEEP
javascriptjqueryarraysobject
kramer65
kramer65

Reputation: 53853

How to efficiently merge two arrays in Javascript?

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:

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!

Upvotes: 3

Views: 159

Answers (5)

Sampath Liyanage
Sampath Liyanage

Reputation: 4896

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);

Upvotes: 0

artm
artm

Reputation: 8584

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!!"}]

Upvotes: 1

dfsq
dfsq

Reputation: 193261

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') );

Upvotes: 0

adeneo
adeneo

Reputation: 318182

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>';

Upvotes: 1

Max Bumaye
Max Bumaye

Reputation: 1009

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.

Upvotes: 0

Related Questions