Native javascript - merge two arrays of objects

Question

I want to merge two array like :

arr1 = [
    ['01/09',1],
    ['02/09',2],
    ['03/09',3],
    ['04/09',4]
];

arr2 = [
    ['01/09',13],
    ['03/09',14],
    ['04/09',15],
    ['05/09',16]
];

I want an output like this :

res = [
    ['01/09',1,13],
    ['02/09',2,0],
    ['03/09',3,14],
    ['04/09',4,15],
    ['05/09',0,16]
]

I really want some solutions! Thank you

Possible duplicate of [How to merge two arrays in Javascript and de-duplicate items](http://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items) — Fadhly Permata, Sep 27 '16 at 07:49
Not an exact duplicate. The question you pointed merges two arrays of simple values in a single one, here the values themselves are merged together: `['01/09', 1]` and `['01/09', 13]` gives `['01/09', 1, 13]`. — Yassine Badache, Sep 27 '16 at 07:54
Welcome to SO! Please refer [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) and provide necessary details. — Rajesh, Sep 27 '16 at 07:54
In fact, concat doesn't detect duplicate, it just add the second array to the first array. — Heri, Sep 27 '16 at 07:59

Nina Scholz · Answer 1 · 2016-09-27T08:15:37.957

You could use a combined approach to build the empty array with the parameters adn iterate and build a hash table for the matched items. Then apply the value.

function merge(arrays) {
    var hash = Object.create(null),
        merged = [];

    arrays.forEach(function (a, i) {
        a.forEach(function (b) {
            if (!hash[b[0]]) {
                hash[b[0]] = Array.apply(null, { length: arrays.length + 1 }).map(function () { return 0 });
                hash[b[0]][0] = b[0];
                merged.push(hash[b[0]]);
            }
            hash[b[0]][i + 1] = b[1];
        });
    });
    return merged;
}

var arr1 = [['01/09', 1], ['02/09', 2], ['03/09', 3], ['04/09', 4]],
    arr2 = [['01/09', 13], ['03/09', 14], ['04/09', 15], ['05/09', 16]];

console.log(merge([arr1, arr2]));

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

Ok! i will test it and let you know! – Heri Sep 27 '16 at 08:15 — Heri, Sep 27 '16 at 08:15

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You can use Array.find to search in array and then use Array.concat to merge them.

Array.find + array.concat

var arr1 = [
  ['01/09', 1],
  ['02/09', 2],
  ['03/09', 3],
  ['04/09', 4]
];

var arr2 = [
  ['01/09', 13],
  ['03/09', 14],
  ['04/09', 15],
  ['05/09', 16]
];

var result = arr1.map(function(a1) {
  var _tmp = arr2.find(x => x[0] === a1[0]) || [];
  return a1.concat(_tmp.splice(1));
});

console.log(result)

Though, I would suggest you to use following structure as it would be more scalable.

Map object

var arr1 = [
  ['01/09', 1],
  ['02/09', 2],
  ['03/09', 3],
  ['04/09', 4]
];

var arr2 = [
  ['01/09', 13],
  ['03/09', 14],
  ['04/09', 15],
  ['05/09', 16]
];
var result = {};
arr1.forEach(function(item) {
  result[item[0]] = item.slice(1) || [];
});

arr2.forEach(function(item) {
  result[item[0]] = result[item[0]] || [];
  result[item[0]] = result[item[0]].concat(item.slice(1))
});

console.log(result)

Few pointers,

array.concat will return merged string but will not update the variable. So don't forget to assign it.
array.find has compatibility issues. Do check them before using it. You can also use array.filter as an alternative.

score 0 · Answer 3 · answered Sep 27 '16 at 08:25

var arr1 = [
  ['01/09', 1],
  ['02/09', 2],
  ['03/09', 3],
  ['04/09', 4]
];

var arr2 = [
  ['01/09', 13],
  ['03/09', 14],
  ['04/09', 15],
  ['05/09', 16]
];

var arr3 = [
  ['01/09', 130],
  ['03/09', 140],
  ['04/09', 150],
  ['05/09', 160]
];


function mergeArrays() {
  var resultObj = {},
    resultArray = [];
  var array = Array.prototype.concat.apply([], Array.prototype.slice.call(arguments));
  array.map(function(item) {
    var key = item[0];
    if (!this[key]) {
      this[key] = [];
      this[key].push(key);
    }
    this[key].push(item[1]);
  }, resultObj);

  for (var key in resultObj) {
    resultArray.push(resultObj[key]);

  }
  return resultArray;
}
console.log(mergeArrays(arr1, arr2, arr3));

score 0 · Answer 4 · answered Sep 27 '16 at 08:39

You could do this with reduce() and forEach()

var arr1 = [
  ['01/09', 1],
  ['02/09', 2],
  ['03/09', 3],
  ['04/09', 4]
];
var arr2 = [
  ['01/09', 13],
  ['03/09', 14],
  ['04/09', 15],
  ['05/09', 16]
];

var obj = {}
var result = arr1.reduce(function(r, e) {

  arr2.forEach(function(el, i) {
    if (!obj[e[0]]) {
      obj[e[0]] = [e[0], 0, 0];
      r.push(obj[e[0]]);
    }

    obj[e[0]][1] = e[1];
    if (el[0] == e[0]) {
      obj[e[0]][2] = el[1];
    } else {
      if (!obj[el[0]]) {
        obj[el[0]] = [el[0], 0, el[1]];
        r.push(obj[el[0]]);
      }
    }
  })

  return r;
}, []);

console.log(result)

Native javascript - merge two arrays of objects

4 Answers4

Array.find + array.concat

Map object

Linked