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