How do I combine two arrays in react to get a new one with all of the items from the previous two?

user_18342901 0
Viewed 107

I am trying to combine two arrays based on a shared property they both have. How can I do this in react? I want to combine them to create one array that contains the checkbox as well as all of the other items.

Here are two sample arrays:

const array1 = [ 
  {Handle: "handle1", title: "handle1"},
  {Handle: "handle2", title: "handle2"},
  {Handle: "handle3", title: "handle3"} ]

const array2 = [ 
  {Handle: "handle1", checkbox: true},
  {Handle: "handle2", checkbox: false},
  {Handle: "handle3", checkbox: true} ]

Result:

const array2 = [ 
  {Handle: "handle1", checkbox: true, title:"handle1"},
  {Handle: "handle2", checkbox: false, title:"handle2"},
  {Handle: "handle3", checkbox: true, title:"handle3"} ]

How do I combine them in such a way that I get a new array that contains the handle, title and checkbox all in the right places?

reactjs javascript
5 Answers

Something like this may work, not sure how much the data will change with the object name you want to combine.

const array1 = [ 
  {Handle: "handle1", title: "handle1"},
 {Handle: "handle2", title: "handle2"},
 {Handle: "handle3", title: "handle3"} ]
 
 const array2 = [ 
  {Handle: "handle1", checkbox: true},
 {Handle: "handle2", checkbox: false},
 {Handle: "handle3", checkbox: true} ]
 
 
 const newArr = array1.map(v => {
    let obj = array2.find(o => o.Handle === v.Handle)
  
  if(obj) {
    v.checkbox = obj.checkbox
  }
  return v
 })
 
 console.log(newArr)

user_101230700

You can like so:

const array1 = [ 
  {Handle: "handle1", title: "handle1"},
 {Handle: "handle2", title: "handle2"},
 {Handle: "handle3", title: "handle3"} ]

const array2 = [ 
  {Handle: "handle1", checkbox: true},
 {Handle: "handle2", checkbox: false},
 {Handle: "handle3", checkbox: true} ]

const array3 = array1.map(({ Handle, title }, idx) => ({Handle, title, checkbox: array2[idx].checkbox}));
console.log(array3)


const array1 = [ 
  {Handle: "handle1", title: "handle1"},
 {Handle: "handle2", title: "handle2"},
 {Handle: "handle3", title: "handle3"} ]

const array2 = [ 
  {Handle: "handle1", checkbox: true},
 {Handle: "handle2", checkbox: false},
 {Handle: "handle3", checkbox: true} ]

const array3 = array1.map(({ Handle, title }, idx) => ({Handle, title, checkbox: array2[idx].checkbox}));
console.log(array3)

user_112250650

Here we are the using map method and Object.assign method to merge the array of objects by using id.

const array1 = [ 
  {Handle: "handle1", title: "handle1"},
 {Handle: "handle2", title: "handle2"},
 {Handle: "handle3", title: "handle3"} ]
const array2 = [ 
  {Handle: "handle1", checkbox: true},
 {Handle: "handle2", checkbox: false},
 {Handle: "handle3", checkbox: true} ]
 

  console.log(array1.map((item1,i)=>{
     if(array2.find(item2 => item2.Handle === item1.Handle)){
       return Object.assign({},item1,array2.find(item2 => item2.Handle === item1.Handle))
     }
  }))

And you can do like this.

const array1 = [ 
  {Handle: "handle1", title: "handle1"},
 {Handle: "handle2", title: "handle2"},
 {Handle: "handle3", title: "handle3"} ]
const array2 = [ 
  {Handle: "handle1", checkbox: true},
 {Handle: "handle2", checkbox: false},
 {Handle: "handle3", checkbox: true} ]
 
 let mergedarray = array1.map(itm => ({
        ...array2.find((item) => (item.id === itm.id) && item),
        ...itm
 }));
 console.log(mergedarray)

user_155795730 
const newArr = []
array1.map((item) => {
    const checkbox = array2.find(array2Item => array2Item.Handle === item.Handle).checkbox;
    newArr2.push({ title: item.title, Handle: item.Handle, checkbox })
});
user_191872530 
const parsedArray = array1.map(el => {
  const extraData = array2.find(arr2el => arr2el.Handle === el.Handle)
  return {
    ...el,
    ...extraData
  }
})

Result :

[
  { Handle: 'handle1', title: 'handle1', checkbox: true },
  { Handle: 'handle2', title: 'handle2', checkbox: false },
  { Handle: 'handle3', title: 'handle3', checkbox: true }
]
user_119007160
Related