How to compare two arrays and return another one?

Question

How to compare two arrays and return another one? I'm trying to compare two arrays to compare records by id and then render a new array

const arr1 = [
  { id: 1, title: "Admin" },
  { id: 2, title: "Vip" }
];

const arr2 = [
  {
    id: 1,
    root: 1
  },
  {
    id: 2,
    root: 0
  }
];

let intersection = arr1.filter(({ id }) => arr2.includes(id));

need:

const needArr = [
  { id: 1, title: "Admin", root: 1 },
  { id: 2, title: "Vip", root: 0 }
];

What have you tried so far? Where are you stuck? If you want to return any other array, why do you need to compare the first two? — Nico Haase, Feb 15 '22 at 12:26
https://stackoverflow.com/questions/46849286/merge-two-array-of-objects-based-on-a-key — Emil Karlsson, Feb 15 '22 at 12:42

score 1 · Accepted Answer · answered Feb 15 '22 at 12:41

You could make use of map() and find() and iterate over the first array arr1:

const needArr = arr1.map(entry => {
    const root = arr2.find(arr2Entry => entry.id === arr2Entry.id)?.root
    return {...entry, root: root}
} )

The root property will be set to undefined for each entry in the needArr result if there is no entry with the same id in arr2 as in arr1.

score 0 · Answer 2 · answered Feb 15 '22 at 12:35

Something like this could work,


const giveNew = (a, b) => {
    let shorter, longer;
    if(a.length>b.length){
      longer = a;
      shorter = b;
    } else {
      longer = b;
      shorter = a;
    }
  
    return longer.map((v, i)=> {
      const matched = shorter.find(val=> val.id === v.id);
      if(matched){
          return {
          ...v, ...matched
      }
    }
  })
}

score 0 · Answer 3 · answered Feb 15 '22 at 12:41

Assuming there's a 1:1 relationship between the arrays - map over one of the arrays, find the corresponding object in the other array by its id, and then return a new updated object.

const arr1=[{id:1,title:"Admin"},{id:2,title:"Vip"}],arr2=[{id:1,root:1},{id:2,root:0}];

const out = arr2.map(obj => {
  return {
    ...arr1.find(inner => inner.id === obj.id),
    root: obj.root
  };
});

console.log(out);

score 0 · Answer 4 · answered Feb 15 '22 at 12:47

0

As is pointed out in Merge two array of objects based on a key, you can do this:

let intersection = arr1.map(item => ({...item, ...arr2.find(item2 => item.id === item2.id)}));

answered Feb 15 '22 at 12:47

Emil Karlsson

1,000
1
7
16

ArmNajafi · Answer 5 · 2022-02-15T12:59:58.090

0

I tried this worked.

const arr1 = [
    { id: 1, title: "Admin" },
    { id: 2, title: "Vip"}
  ];
  const arr2 = [
    {
      id: 1,
      root: 1
    },
    {
      id: 2,
      root: 0
    }
  ];
for(var i=0 ;i < arr2.length; i++)
{
    objIndex = arr1.findIndex((obj => obj.id == arr2[i].id));
    arr1[objIndex].root = arr2[i].root;
}
console.log(arr1);

edited Feb 15 '22 at 12:59

answered Feb 15 '22 at 12:47

ArmNajafi

1
1

1

Please add some explanation to your answer such that others can learn from it – Nico Haase Feb 15 '22 at 12:54

score 0 · Answer 6 · answered Feb 15 '22 at 13:04

Hope this satisfies your use case. This also works in the case where there is no 1:1 mappings.

const arr1 = [
    { id: 1, title: "Admin" , root: 0 },
    { id: 2, title: "Vip" , root: 0 },
    { id: 100, title: "NotExistInArr2" , root: 0 }
  ];
  const arr2 = [
    {
      id: 1,
      root: 1
    },
    {
      id: 2,
      root: 0
    },
    {
      id: 200,
      root: 0
    }
  ];

const consolidatedIds = arr1.map(a => a.id).concat(arr2.map(a => a.id));
//console.log(consolidatedIds);
const consolidatedDedupedIds = arrayUnique(consolidatedIds);
//console.log(consolidatedDedupedIds);

const needArr = consolidatedDedupedIds.map(entry => {
    const arr1Item = arr1.find(arr1Entry => entry === arr1Entry.id);
    const arr2Item = arr2.find(arr2Entry => entry === arr2Entry.id);

    return {...arr1Item, ...arr2Item}
} )

console.log(needArr)

//--- utility function
function arrayUnique(array) {
    var a = array.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }

    return a;
}

Note: improvised version of other questions, inspired from other answers

How to compare two arrays and return another one?

6 Answers6