Append Property From Two Arrays Of Objects

In JavaScript, I have two arrays - arr1, arr2 arr1 is an array of objects as shown below - [ { user: {id: 1, name: 'name1', role: 'A'} }, { user: {id: 2, name: 'name2', role:

Solution 1:

The most efficient way that only iterates each array once is to map arr2 to an object or Map with id as keys then loop over arr1 and look each id up to get the username.

An object or Map lookup is an o(1) operation whereas methods like find() require numerous iterations of arr2

const arr1=[{user:{id:1,name:"name1",role:"A"}},{user:{id:2,name:"name2",role:"B"}},{user:{id:3,name:"name3",role:"A"}}],
  arr2=[{id:2,username:"brad"},{id:1,username:"colly"},{id:3,username:"sophie"}];

const arr2Names = newMap(arr2.map(e => [e.id, e.username]));

arr1.forEach(({user}) => user.username = arr2Names.get(user.id))

console.log(arr1)

Solution 2:

You can use map and find in your case.

const arr1 = [
  { user: { id: 1, name: "name1", role: "A" } },
  { user: { id: 2, name: "name2", role: "B" } },
  { user: { id: 3, name: "name3", role: "A" } },
];

const arr2 = [
  { id: 2, username: "brad" },
  { id: 1, username: "colly" },
  { id: 3, username: "sophie" },
];

const output = arr1.map(el => ({
  user: { ...el.user, username: arr2.find(x => x.id === el.user.id).username },
}));

console.log(output);

Solution 3:

This should do the trick:

constarr1= [
  { user: {id:1, name:"name1", role:"A"} },
  { user: {id:2, name:"name2", role:"B"} },
  { user: {id:3, name:"name3", role:"A"} }
];constarr2= [
  { id:2, username:"brad", ... },
  { id:1, username:"colly", ... },
  { id:3, username:"sophie", ... }
]

mergedArray=arr1.map(e=> {
  return {
    user: {
      ...e.user,
      username:arr2.find(x=>x.id===e.user.id).username
    }
  }
})

In case you want to merge more values than just the username, you can save the value found in arr2 in a variable:

mergedArray = arr1.map(e => {
  const match = arr2.find(x => x.id === e.user.id);
  return {
    user: {
      ...e.user,
      username: match.username,
      someOtherValue: match.someOtherValue
    }
  }
})

If it is not certain, that objects in arr2, contain a username, you will get an error when accessing the username in the function, username: match?.username ?? 'fallbackValue' will prevent the error and return a default value in case, if no default value is needed, you can leave the ?? '...' part

Solution 4:

Given your two arrays, you will need to do this:

// loop through all the elements in arr1    const result = arr1.map(element => {
      // Search the element by ID in arr2 (You need to loop every time, probably not the better solution.// Maybe better with a Mapconst elInArr2Found = arr2.find(arr2Element => arr2Element.id === element.user.id);
      // If the element is found, set the property "username" to the element// If the element is not found, leave it as isif (elInArr2Found !== undefined) {
        element.user.username = elInArr2Found.username;
      }
      // return the elementreturn element;
    })

result will have all your elements with the username set.

Check the Map documentation to this avoid nested loop.