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?

Answer 1

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

Answer 2

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

Answer 3

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)

Answer 4

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

Answer 5

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

Answer 6

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