How to concat two arrays and remove duplicates in javascript

Question

I want concat following two arrays by removing duplicates without assigning to third variable:

var arr1=[{id:1,name:'AB'},{id:2,name:'CD'}];

var arr2=[{id:3,name:'EF'},{id:2,name:'CD'}];

I want arr1 like:

[{id:1,name:'AB'},{id:2,name:'CD'},{id:3,name:'EF'}]

arr1.concat(arr2);

Use lodash union https://lodash.com/docs/4.17.10#union or https://lodash.com/docs/4.17.11#uniqWith — CornelC, Jan 08 '19 at 10:56
you can simply loop through array which has less elements & compare with the other array . push the non-existing object to the same array to avoid usage 3rd variable.. — super cool, Jan 08 '19 at 11:09
`$.each(arr1,(i,x)=>{ if($.grep(arr2,(y)=> x.id == y.id && x.name==y.name ).length < 1) arr2.push(x); });` something like this, hope if helps. you can use `.filter` inplace of grep in `ang` — super cool, Jan 08 '19 at 11:53
I posted [here](https://stackoverflow.com/a/60918864/4934446) an option with `JSON.stringify` — Jöcker, Mar 29 '20 at 18:26

score 4 · Answer 1 · answered Jan 08 '19 at 11:09

First merge two arrays then put array into a map with their ids. Then create array from map values.

var arr1=[{id:1,name:'AB'},{id:2,name:'CD'}];
var arr2=[{id:3,name:'EF'},{id:2,name:'CD'}];

arr1 = arr1.concat(arr2) // merge two arrays
let foo = new Map();
for(const tag of arr1) {
  foo.set(tag.id, tag);
}
let final = [...foo.values()]
console.log(final)

Ashish Ranjan · Answer 2 · 2019-01-08T11:01:06.353

3

Can use Array reduce and findIndex to achieve what you want.

var arr1=[{id:1,name:'AB'},{id:2,name:'CD'}];

var arr2=[{id:3,name:'EF'},{id:2,name:'CD'}];

// loop over arr2, add the elements of array2 if it doesn't exist in array1
var newArr = arr2.reduce((acc, eachArr2Elem) => {
  if (arr1.findIndex((eachArr1Elem) => eachArr1Elem.id === eachArr2Elem.id && eachArr1Elem.name === eachArr2Elem.name)  === -1) {
    acc.push(eachArr2Elem)
  }
  return acc
}, [...arr1]); // initialize the new Array with the contents of array1

console.log(newArr)

edited Jan 08 '19 at 11:01

answered Jan 08 '19 at 10:57

Ashish Ranjan

11,263
4
22
45

is it possible without assigning to third variable – madhu Goud Jan 08 '19 at 11:00
@madhuGoud: You also mean the variables in the callBacks? I guess No (Not in plain Javascript), Here the elements are `Objects`, there is no simple way to concat them and remove duplicates – Ashish Ranjan Jan 08 '19 at 11:02
is it possible in typescript – madhu Goud Jan 08 '19 at 11:16
@madhuGoud: TypeScript is just a superset of Javascript, it is not a library. I am not clear with what you mean by the third variable. Do you want to modify any of the existing `arr1` or `arr2` with new array? Remember, something like: `arr1.concat(arr2);` is also a new reference, its just that you are not assigning it to a variable – Ashish Ranjan Jan 08 '19 at 11:18
@madhuGoud Check my solution if you want, I solved this with using map. Since your arrays have objects in it, it's not that simple. If your arrays were not objects, you could use `Set` to achieve unique array easily. – westdabestdb Jan 08 '19 at 11:19

score 1 · Answer 3 · answered Jan 08 '19 at 12:00

using the spread operator you can flatten any amount of arrays passed to the combineAndDeDup method, i have also split out some logic methods for (hopefully) more readable code. i hope this helps.

const arr1 = [{id:1,name:'AB'}, {id:2,name:'CD'}]
const arr2 = [{id:3,name:'EF'}, {id:2,name:'CD'}]

const flatten = a => [].concat.apply([], a)
const noDuplicateProps = (a, b) => Object.keys(a).some(k => a[k] === b[k])

const combineAndDeDup = (...arrs) => {
  
  return flatten(arrs).reduce((acc, item) => {
    const uniqueItem = acc.findIndex(i => noDuplicateProps(i, item)) === -1
    
    if (uniqueItem) return acc.concat([ item ])
    
    return acc
  }, [])
}


const deDuped = combineAndDeDup(arr1, arr2)
const megaDeDuped = combineAndDeDup(arr1, arr2, arr1, arr1, arr2, arr1)

console.log(deDuped)
console.log(megaDeDuped)

score 0 · Answer 4 · answered Jan 08 '19 at 11:02

0

By using lodash _.uniqWith(array, [comparator])

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];

_.uniqWith(objects, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

answered Jan 08 '19 at 11:02

CornelC

3,675
1
16
25

score 0 · Answer 5 · answered Jan 08 '19 at 12:04

  var arr1 = [{ id: 1, name: 'AB' }, { id: 2, name: 'CD' }];
  var arr2 = [{ id: 3, name: 'EF' }, { id: 3, name: 'XX' }];
  arr1.forEach(element => {
    arr2.forEach((el, idx) => {
      if (element.id === el.id || element.name === el.name) {
        delete arr2[idx]
      }
    });
  });

  let data = arr1.concat(arr2)

  // or arr1 = arr1.concat(arr2)
  // then your arr1 contains your unique array

data variable contains your unique array

How to concat two arrays and remove duplicates in javascript

5 Answers5