merge array with unique keys

Question

I have array of objects called newArray and oldArray.

Like this : [{name: 'abc', label: 'abclabel', values: [1,2,3,4,5]}]

example : 
newArray = [
{name: 'abc', label: 'abclabel', values: [1,2,3,4,5]}, 
{name: 'test', label: 'testlabel', values: [1,2,3,4]}
]

oldArray = [
{name: 'oldArray', label: 'oldArrayLabel', values: [1,2,3,4,5]}, 
{name: 'test', label: 'testlabel', values: [1,2,3,4,5]}
]

result will be = [
{name: 'abc', label: 'abclabel', values: [1,2,3,4,5]}, 
{name: 'test', label: 'testlabel', values: [1,2,3,4]}, 
{name: 'oldArray', label: 'oldArrayLabel', values: [1,2,3,4,5]}
];

I wanted to merge both the array in such a way that whenever name and label are equal in both the arrays it should only consider newArray value.

I have tried

function mergeArrayWithLatestData (newData, oldData) {
  let arr = [];
  let i = 0; let j =0
  while ((i < newData.length) && (j < oldData.length)) {
    if ((findIndex(newData, { name: oldData[i].name, label: oldData[i].label })) !== -1) {
      arr.push(newData[i])
  } else {
    arr.push(newData[i]);
    arr.push(oldData[i]);
  }
  i += 1;
  j += 1;
}
while (i < newData.length) {
    arr.push(newData[i]);
 }
 return arr;
}

But i am not getting correct result.

Any suggestions?

Answer 1

You could add all array with a check if name/label pairs have been inserted before with a Set.

var newArray = [{ name: 'abc', label: 'abclabel', values: [1, 2, 3, 4, 5] }, { name: 'test', label: 'testlabel', values: [1, 2, 3, 4] }],
    oldArray = [{ name: 'oldArray', label: 'oldArrayLabel', values: [1, 2, 3, 4, 5] }, { name: 'test', label: 'testlabel', values: [1, 2, 3, 4, 5] }],
    result = [newArray, oldArray].reduce((s => (r, a) => {
        a.forEach(o => {
            var key = [o.name, o.label].join('|');
            if (!s.has(key)) {
                r.push(o);
                s.add(key);
            }
        });
        return r;
    })(new Set), []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

You can simply use Array.reduce() to create a map of the old Array and group by combination of name and label. Than iterate over all the elements or objects of the new Array and check if the map contains an entry with given key(combination of name and label), if it contains than simply update it values with the values of new array object, else add it to the map. Object.values() on the map will give you the desired result.

let newArray = [ {name: 'abc', label: 'abclabel', values: [1,2,3,4,5]}, {name: 'test', label: 'testlabel', values: [1,2,3,4]} ];

let oldArray = [ {name: 'oldArray', label: 'oldArrayLabel', values: [1,2,3,4,5]}, {name: 'test', label: 'testlabel', values: [1,2,3,4,5]} ];

let map = oldArray.reduce((a,curr)=>{
  a[curr.name +"_" + curr.label] = curr;
  return a;
},{});

newArray.forEach((o)=> {
  if(map[o.name +"_" + o.label])
    map[o.name +"_" + o.label].values = o.values;
  else
    map[o.name +"_" + o.label] = o;
});
console.log(Object.values(map));

Answer 3

In your first while loop

while ((i < newData.length) && (j < oldData.length)) {
  if ((findIndex(newData, { name: oldData[i].name, label: oldData[i].label })) !== -1) 
  {
    arr.push(newData[i])
  } else {
    arr.push(newData[i]);
    arr.push(oldData[i]);
  }
  i += 1;
  j += 1;
}

i and j always have the same value, you are only comparing entries at the same positions in the arrays. If they have different lengths, you stop comparing after the shorter array ends. Your second while-loop will only be executed if newArray is larger than oldArray.

One possible solution is to copy the oldArray, then iterate over newArray and check if the same value exists.

function mergeArrayWithLatestData (newData, oldData) {
  let arr = oldData;
  for(let i = 0; i < newData.length; i++) {
    let exists = false;
    for(let j = 0; j < oldData.length; j++) {
      if(newData[i].name === oldData[j].name && newData[i].label === oldData[j].label) {
        exists = true;
        arr[j] = newData[i];
      }
    }
    if(!exists) {
      arr.push(newData[i]);
    }
  }
  return arr;
}

var newArray = [
{name: 'abc', label: 'abclabel', values: [1,2,3,4,5]}, 
{name: 'test', label: 'testlabel', values: [1,2,3,4]}
]

var oldArray = [
{name: 'oldArray', label: 'oldArrayLabel', values: [1,2,3,4,5]}, 
{name: 'test', label: 'testlabel', values: [1,2,3,4,5]}
]

console.log(mergeArrayWithLatestData(newArray, oldArray));

Answer 4

You make copies of the original arrays, and in the first one, or change the element, or add:

function mergeArrayWithLatestData (a1, a2) {
  var out = JSON.parse(JSON.stringify(a1))
  var a2copy = JSON.parse(JSON.stringify(a2))
  a2copy.forEach(function(ae) {
    var i = out.findIndex(function(e) {
        return ae.name === e.name && ae.label === e.label
    })
    if (i!== -1) {
        out[i] = ae
    } else {
        out.push(ae)
    }
  })
  return out
}

[ https://jsfiddle.net/yps8uvf3/ ]

Answer 5

This is Using a classic filter() and comparing the name/label storing the different pairs using just +. Using destructuring assignment we merge the two arrays keeping the newest first, so when we check the different the newest is always the remaining.

var newArray = [{ name: "abc", label: "abclabel", values: [1, 2, 3, 4, 5] },{ name: "test", label: "testlabel", values: [1, 2, 3, 4] }];

var oldArray = [{ name: "oldArray", label: "oldArrayLabel", values: [1, 2, 3, 4, 5] },{ name: "test", label: "testlabel", values: [1, 2, 3, 4, 5] }];

var diff = [];

oldArray = [...newArray, ...oldArray].filter(e => {

  if (diff.indexOf(e.name + e.label) == -1) {
    diff.push(e.name + e.label);
    return true;
  } else {
    return false; //<--already exist in new Array (the newest)
  }

});

console.log(oldArray);

Answer 6

Create an object, with key as name and label. Now, first add all the oldData records to the object and then add newData records in object. If there are any objects in common with same name and label, it will overwrite the old Data value. Finally, get the values of the Object which is the merged data set.

var arr1 = [{name: 'def', label: 'abclabel', values: [6,7]}, {name: 'abc', label: 'abclabel', values: [1,2,3,4,5]}];
var arr2 = [{name: 'xy', label: 'abclabel', values: [6,7]}, {name: 'abc', label: 'abclabel', values: [6,7]}];

function mergeArrayWithLatestData(newData, oldData) {
  var result = {};
  [...oldData, ...newData].forEach(o => result[o.name + "~~$$^^" + o.label] = o);
  return Object.values(result);
}

let result = mergeArrayWithLatestData(arr1, arr2);
console.log(result);

Answer 7

Alternative: using a Map as the initial value in a reducer. You should know that (as in the selected answer) you loose information here, because you're not comparing on the values property within the array elements. So one of the objects with name/label pair test/testlabel will be lost in the merged Array. If concatenation in the snippet was the other way around (so newArray.concat(oldArray), the test/testLabel Object within the merged Array would contain another values property value.

const newArray = [
  {name: 'abc', label: 'abclabel', values: [1,2,3,4,5]}, 
  {name: 'test', label: 'testlabel', values: [1,2,3,4]}
];

const oldArray = [
  {name: 'oldArray', label: 'oldArrayLabel', values: [1,2,3,4,5]}, 
  {name: 'test', label: 'testlabel', values: [1,2,3,4,5]}
];

const merged = [ 
  ...oldArray.concat(newArray)
      .reduce( (map, value) => 
          map.set(`${value.name}${value.label}`, value), 
          new Map())
  .values()
];
  
console.log(merged);

Answer 8

function mergeArray(newArray, oldArray) {
      var tempArray = newArray;

      oldArray.forEach(oldData => {
        var isExist = tempArray.findIndex(function (newData) {
          return oldData.name === newData.name;
        });
        if (isExist == -1) {
          tempArray.push(oldData);
        }
      });

      return tempArray;
    }

    var newArray = [{
      name: 'abc',
      label: 'abclabel',
      values: [1, 2, 3, 4, 5]
    }, {
      name: 'test',
      label: 'testlabel',
      values: [1, 2, 3, 4]
    }];
    var oldArray = [{
      name: 'oldArray',
      label: 'oldArrayLabel',
      values: [1, 2, 3, 4, 5]
    }, {
      name: 'test',
      label: 'testlabel',
      values: [1, 2, 3, 4, 5]
    }];

    var resultArray = [];
    resultArray = mergeArray(newArray, oldArray);
    console.log(resultArray);