Javascript merge arrays when one contains updated data

Question

I have two arrays of objects like this:

var myArray = [
  {pk: '1', person: 'person 1'}, 
  {pk: '2', person: 'someone'}, 
];

var updatedArray = [
  {pk: '2', person: 'another person'}
];

I'm looking to merge the two in the most efficient way possible. My thought was to merge the older myArray into the newer updatedArray and leave out any items where myArray.pk == updatedArray.pk

I'm having trouble trying to get it going with either jQuery or underscore. I've been trying to use this one as an example as well.

Any ideas?

Possible duplicate of [Merging two collections using Underscore.JS](http://stackoverflow.com/questions/13514121/merging-two-collections-using-underscore-js) — Frank Tan, Jul 13 '16 at 22:52

Morteza Tourani · Accepted Answer · 2016-07-13T22:53:32.820

1

I think looping through updates and copy it over to current value would be a good way. If you have just one property to change then there is no need for Object.assign. you can simply replace it with

myArray[idx].name = uv.name

var myArray = [
  {pk: '1', person: 'person 1'}, 
  {pk: '2', person: 'someone'}, 
];

var updatedArray = [
  {pk: '2', person: 'another person'}
];

updatedArray.forEach(uv => {
  var idx = myArray.findIndex(v => v.pk === uv.pk)
  if (idx != -1)
    myArray[idx] = Object.assign({}, myArray[idx], uv);
  else myArray.push(uv);
});

console.log(myArray)

edited Jul 13 '16 at 22:53

answered Jul 13 '16 at 22:50

Morteza Tourani

3,506
5
41
48

1

are you sure the idx is the same for both arrays?? – webdeb Jul 13 '16 at 22:51
@webdeb there is no need of that cause your looping through one of them. BTW I enhanced mine to support situations that updatedArray has new items. – Morteza Tourani Jul 13 '16 at 22:54

score 1 · Answer 2 · answered Jul 14 '16 at 00:47

You can try

 function mergeArr(arrOne, arrTwo, prop) {
        _.each(arrTwo, function(arrTwoobj) {
            var arrOneobj = _.find(arrOne, function(arrOneobj) {
                return arrOneobj[prop] === arrTwoobj[prop];
            });
            arrOneobj ? _.extend(arrOneobj, arrTwoobj) : arrOne.push(arrTwoobj);
        });
    }

    var myArray = [
      {pk: '1', person: 'person 1'}, 
      {pk: '2', person: 'someone'}, 
    ];

    var updatedArray = [
      {pk: '2', person: 'another person'}
    ];

    mergeArr(myArray, updatedArray, 'pk');
    console.log(myArray);

score 1 · Answer 3 · answered Jul 14 '16 at 00:56

1

var myArray = [
  {pk: '1', person: 'person 1'}, 
  {pk: '2', person: 'someone'}, 
];

var updatedArray = [
  {pk: '2', person: 'another person'}
];

var exists = [];
for (item of updatedArray) {
  exists[item.pk] = true;
}
for (item of myArray) {
  if (!exists.hasOwnProperty(item.pk)) {
    updatedArray.push(item);
  }
}

console.log(updatedArray);

answered Jul 14 '16 at 00:56

Leonid Zakharov

940
1
6
11

This answer is definitely simpler. Is it as fast as the answer posted by mortezaT? – spikej Jul 14 '16 at 21:44
1

I think that faster, but the difference is minimal. – Leonid Zakharov Jul 14 '16 at 22:47

webdeb · Answer 4 · 2016-07-13T23:04:12.420

Most efficient way would be, first create a map from one of the arrays. Then run one loop and get the items from the map

you need just two functions, reduce and map

This way only need array1.length + array2.length iterations, not array1.length * array2.length

// creates the map
var myMap = myArray.reduce(function(obj, item) {
  obj[item.pk] = item
}, {})

// merges updatedArray items, with the item from the map
var mergedArray = updatedArray.map(function(item) {
   return myMap[item.pk] ? Object.assign({}, myMap[item.pk], item) : item
})

Javascript merge arrays when one contains updated data

4 Answers4