Intersect two object arrays then create a new array from both of them

Question

I have two objects array:

    let arr1 = [
        { id: "abdc4051", color: "red" },
        { id: "abdc4052", color: "blue" }
    ];

    let arr2 = [
        { uid: "abdc4051", name: "wall" },
        { uid: "abdc4052", name: "kitchen" },
        { uid: "abdc4053", name: "sofa" },
        { uid: "abdc4054", name: "room" }
    ];

I need to make join by id and uid, according to example above I expect this result:

    let arrNew = [
        { uid: "abdc4051", name: "wall",  color: "red" },
        { uid: "abdc4052", name: "kitchen", color: "blue" }
    ];

I what the elegant way to do it in ES6?

Take a look at [Merge two array of objects based on a key](https://stackoverflow.com/q/46849286) — Nick Parsons, Jan 16 '21 at 02:32
if this about **Create** a new single array or **replace** the arr2 array ? — Mister Jojo, Jan 16 '21 at 02:59
your question is unclear : if `arr2[x].uid` doesn't exist for an `arr1[n].ui`, the `arr1[n]` should be deleted ? — Mister Jojo, Jan 16 '21 at 03:08
The question should be `Intersect two object arrays then create a new array from both of them` instead of `Create a single array based on two arrays` — Nguyễn Văn Phong, Jan 16 '21 at 04:06

Nguyễn Văn Phong · Answer 1 · 2021-01-16T03:34:56.543

You can approach this way to get the highest performance.

As a result, the Big O (time complexity) just take max(O(N) of arr1, O(N) of arr2)

let arr1 = [{ id: "abdc4051", color: "red" },
            { id: "abdc4052", color: "blue" }];
let arr2 = [{ uid: "abdc4051", name: "wall" },
            { uid: "abdc4052", name: "kitchen" },
            { uid: "abdc4053", name: "sofa" },
            { uid: "abdc4054", name: "room" }];

let result = [], countIndex_1 = 0, countIndex_2 = 0;

while(countIndex_1 < arr1.length && countIndex_2 < arr2.length){
  var item1 = arr1[countIndex_1], item2 = arr2[countIndex_2];
  
  if(item1.id == item2.uid){
    result.push({uid: item2.uid, name: item2.name, color: item1.color});
    countIndex_1 ++, countIndex_2 ++;
  }else if(item1.id < item2.uid) 
    countIndex_1 ++;
   else 
    countIndex_2 ++;
}
console.log(result);

Note: Assuming that your 2 arrays are sorted, otherwise, you should sort them first.

arr1.sort((a, b) => a.id - b.id);
arr2.sort((a, b) => a.uid - b.uid);

score 0 · Answer 2 · answered Jan 16 '21 at 02:39

let arr1 = [
    { id: "abdc4051", color: "red" },
    { id: "abdc4052", color: "blue" }
];

let arr2 = [
    { uid: "abdc4051", name: "wall" },
    { uid: "abdc4052", name: "kitchen" },
    { uid: "abdc4053", name: "sofa" },
    { uid: "abdc4054", name: "room" }
];

let result = arr2.map(eachInArr2 => {
    const matchedElementInArr1 = arr1.filter(eachInArr1 => eachInArr1.id === eachInArr2.uid);

    if (matchedElementInArr1.length === 0) {
        return null;
    }

    const merged = {
        ...matchedElementInArr1[0],
        ...eachInArr2,
    };

    delete merged['id'];

    return merged;
}).filter(each => each);

console.log(result);

score 0 · Accepted Answer · answered Jan 16 '21 at 02:39

I am fairly certain this does not qualify as elegant, but this is how I would do it.

const arr1 = [
        { id: "abdc4051", color: "red" },
        { id: "abdc4052", color: "blue" }
    ];

const arr2 = [
        { uid: "abdc4051", name: "wall" },
        { uid: "abdc4052", name: "kitchen" },
        { uid: "abdc4053", name: "sofa" },
        { uid: "abdc4054", name: "room" }
    ];

let arr3=[]
arr1.forEach(a1 => {
  arr2.forEach(a2 => {
    if (a1.id === a2.uid) {
      arr3.push({ uid: a1.id, color: a1.color, name: a2.name})
    }
  })
})

console.log(arr3)

Oh no, by this way, performance is too bad :( – Nguyễn Văn Phong Jan 16 '21 at 04:04 — Nguyễn Văn Phong, Jan 16 '21 at 04:04

Mister Jojo · Answer 4 · 2021-01-16T03:00:37.853

Maybe this way ?

const
    arr1 = 
      [ { id: 'abdc4051', color: 'red'  } 
      , { id: 'abdc4052', color: 'blue' } 
      ] 
  , arr2 = 
      [ { uid: 'abdc4051', name: 'wall'    } 
      , { uid: 'abdc4052', name: 'kitchen' } 
      , { uid: 'abdc4053', name: 'sofa'    } 
      , { uid: 'abdc4054', name: 'room'    } 
      ] 
  , result = arr1.reduce((a,{id,...a1N})=>
      {
      let {uid,...a2N} = arr2.find(x=>x.uid===id) || {uid:null}
      if(uid)
        a.push({ uid,...a2N,...a1N })
      return a  
      },[])

console.log( result )

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

score 0 · Answer 5 · answered Jan 16 '21 at 05:17

    let arr1 = [
        { id: "abdc4051", color: "red" },
        { id: "abdc4052", color: "blue" }
    ];

    let arr2 = [
        { uid: "abdc4051", name: "wall" },
        { uid: "abdc4052", name: "kitchen" },
        { uid: "abdc4053", name: "sofa" },
        { uid: "abdc4054", name: "room" }
    ];

    let arr3 = [];

    arr1.map( item1 => {
        arr3 = arr3.concat( arr2.filter( item => item1.id === item.uid ) );
        arr3.map( item => item1.id === item.uid ? item.color = item1.color : '' );
    } );

    console.log(arr3);

score 0 · Answer 6 · answered Jan 16 '21 at 06:46

You could use Map Object.

const arr1 = [
  { id: 'abdc4051', color: 'red' },
  { id: 'abdc4052', color: 'blue' },
];

const arr2 = [
  { uid: 'abdc4051', name: 'wall' },
  { uid: 'abdc4052', name: 'kitchen' },
  { uid: 'abdc4053', name: 'sofa' },
  { uid: 'abdc4054', name: 'room' },
];
const ret = [];
const map = new Map();
arr1.forEach(({ id, color }) => map.set(id, { color }));
arr2.forEach(
  ({ uid, name }) => map.has(uid) && ret.push({ uid, name, ...map.get(uid) })
);
console.log(ret);

Intersect two object arrays then create a new array from both of them

6 Answers6