How can I uniquely combine two arrays of objects?

Question

I am trying to combine two arrays of objects without using the method unionByfrom lodash.

I am currently working fine on the following code:

var array1 = [
 { a: 1, b: 'first'},
 { a: 2, b: 'second'}
];

var array2 = [
 { a: 3, b: 'third'},
 { a: 1, b: 'fourth'}
];

var array3 = __.unionBy(array2, array1, 'a');

It is output:

[
  {
    "a": 3,
    "b": "third"
  },
  {
    "a": 1,
    "b": "fourth"
  },
  {
    "a": 2,
    "b": "second"
  }
]

This is the desired result, but I cannot use it unionByin my current working environment, so I am looking for a result that uses either native JS, or other methods of lodash 3.6.0 or lower.

Answer 1

Concat and use Array # filter with a helper object to remove duplicates:

var array1 = [{"a":1,"b":"first"},{"a":2,"b":"second"}];

var array2 = [{"a":3,"b":"third"},{"a":1,"b":"fourth"}];

var result = array2.concat(array1).filter(function(o) {  
  return this[o.a] ? false : this[o.a] = true;
}, {});

console.log(result);

Run codeHide result

If ES6 is an option, you can use Set instead of a helper object:

const array1 = [{"a":1,"b":"first"},{"a":2,"b":"second"}];

const array2 = [{"a":3,"b":"third"},{"a":1,"b":"fourth"}];

const result = array2.concat(array1).filter(function(o) {  
  return this.has(o.a) ? false : this.add(o.a);
}, new Set());

console.log(result);

Run codeHide result

Answer 2

Set , .

var array1 = [{ a: 1, b: 'first' }, { a: 2, b: 'second' }],
    array2 = [{ a: 3, b: 'third' }, { a: 1, b: 'fourth' }],
    s = new Set,
    array3 = array2.map(o => (s.add(o.a), o)).concat(array1.filter(o => !s.has(o.a)));

console.log(array3);

Hide result

Answer 3

ES6. , a, :

var array1 = [{"a":1,"b":"first"},{"a":2,"b":"second"}],
    array2 = [{"a":3,"b":"third"},{"a":1,"b":"fourth"}];

var result = [...new Map([...array1,...array2].map( o => [o.a, o] )).values()];

console.log(result);

Hide result

Answer 4

2 a:

var array1 = [{ a: 1, b: 'first'},{ a: 2, b: 'second'}],
  array2 = [{ a: 3, b: 'third'},{ a: 1, b: 'fourth'}],
  array3 = [...array2, ...array1].filter((item, pos, arr) =>
    arr.findIndex(item2 => item.a == item2.a) == pos);

console.log(array3)

Hide result

- , :

var array1 = [{ a: 1, b: 'first'},{ a: 2, b: 'second'}],
  array2 = [{ a: 3, b: 'third'},{ a: 1, b: 'fourth'}],
  array3 = unionBy(array1, array2, 'a');

function unionBy(array1, array2, prop){
  return [...array2, ...array1].filter((item, pos, arr) =>
      arr.findIndex(item2 => item[prop] == item2[prop]) == pos);
}

console.log(array3);

Hide result

. , , , lodash, .

Answer 5

ES5 Array.filter Array.find

var array1 = [{ a: 1, b: "first" }, { a: 2, b: "second" }];

var array2 = [{ a: 3, b: "third" }, { a: 1, b: "fourth" }];

function merge(a, b, prop) {
  var reduced = a.filter(function(itemA) {
return !b.find(function(itemB) {
  return itemA[prop] === itemB[prop];
});
  });
  return reduced.concat(b);
}

console.log(merge(array1, array2, "a"));

Hide result

ES6 arrow

var array1 = [{ a: 1, b: "first" }, { a: 2, b: "second" }];

var array2 = [{ a: 3, b: "third" }, { a: 1, b: "fourth" }];

function merge(a, b, prop) {
  const reduced = a.filter(
itemA => !b.find(itemB => itemA[prop] === itemB[prop])
  );
  return reduced.concat(b);
}

console.log(merge(array1, array2, "a"));

Hide result

ES6

var array1 = [{ a: 1, b: "first" }, { a: 2, b: "second" }];

var array2 = [{ a: 3, b: "third" }, { a: 1, b: "fourth" }];

const merge = (a, b, p) => a.filter( aa => ! b.find ( bb => aa[p] === bb[p]) ).concat(b);

console.log(merge(array1, array2, "a"));

Hide result