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 — Fadhly Permata
– Fadhly Permata, Commented Sep 27, 2016 at 7: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
– Yassine Badache, Commented Sep 27, 2016 at 7:54
Welcome to SO! Please refer How to create a Minimal, Complete, and Verifiable example and provide necessary details. — Rajesh Dixit
– Rajesh Dixit, Commented Sep 27, 2016 at 7:54
In fact, concat doesn't detect duplicate, it just add the second array to the first array. — Heri
– Heri, Commented Sep 27, 2016 at 7:59

Nina Scholz · Accepted Answer · 2016-09-27 08:15:37Z

1

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

edited Sep 27, 2016 at 8:15

answered Sep 27, 2016 at 8:03

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Heri Over a year ago

Ok! i will test it and let you know!

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

Vladu Ionut · Accepted Answer · 2016-09-27 08:25:20Z

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

Nenad Vracar · Accepted Answer · 2016-09-27 08:39:18Z

0

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)

answered Sep 27, 2016 at 8:39

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Collectives™ on Stack Overflow

Native javascript - merge two arrays of objects

4 Answers 4

1 Comment

Array.find + array.concat

Map object

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Array.find + array.concat

Map object

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related