I am trying to bine two arrays based on a shared property they both have. How can I do this in react? I want to bine 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 bine them in such a way that I get a new array that contains the handle, title and checkbox all in the right places?

I am trying to bine two arrays based on a shared property they both have. How can I do this in react? I want to bine 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 bine them in such a way that I get a new array that contains the handle, title and checkbox all in the right places?

• javascript
• reactjs

Share Improve this question Follow edited May 24, 2022 at 14:25 RenaudC5 3,83911 gold badge1313 silver badges3030 bronze badges asked May 24, 2022 at 13:42 AlexTWOAlexTWO 7322 silver badges99 bronze badges 3

• Does this answer your question? adding 2 arrays to a new array in JS – Damian Kociszewski Commented May 24, 2022 at 13:45
• try array3 = [...array1, ...array2] Spread operator – Usama Commented May 24, 2022 at 13:47
• what is the expected result? – SuleymanSah Commented May 24, 2022 at 13:48

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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

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)

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)

const newArr = []
array1.map((item) => {
    const checkbox = array2.find(array2Item => array2Item.Handle === item.Handle).checkbox;
    newArr2.push({ title: item.title, Handle: item.Handle, checkbox })
});

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

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)