I have a two javaScript Array
let x = [
{
id: 'Abc',
children: [
{
id: 12,
name: 'john'
}, {
id: 13,
name: 'dow'
}
]
}, {
id: 'xyz',
children: [
{
id: 123,
name: 'jack'
}, {
id: 134,
name: 'abc'
}
]
}
]
let y = [
{
id: 12,
name: 'mac'
}, {
id: 13,
name: 'dow'
}, {
id: 123,
name: 'Tom'
}, {
id: 134,
name: 'abc'
}
]
I want to update my x
with y
having updated array like this
[
{
id: 'Abc',
children: [
{
id: 12,
name: 'mac'
}, {
id: 13,
name: 'dow'
}
]
}, {
id: 'xyz',
children: [
{
id: 123,
name: 'Tom'
}, {
id: 134,
name: 'abc'
}
]
}
]
I tried this solution like this
x.map((a, index)=>{
a.children.map((b, i)=>{
// console.log('update')
y.find(o => o.id === b.id) || b;
})
})
but I am having undefined
. I searched many answer but didn't get any luck.
x.map((a, index)=>{
a.children.map((b, i)=>{
// console.log('update')
y.find(o => o.id === b.id) || b;
})
})
First of all, you're making a common mistake while using an array function:
Brackets {}
are optional for one-line instructions, but then you need to specify the return
keyword.
arr.filter(v => v === 2)
is equivalent to arr.filter(v => {return v === 2})
. Forget return
, and filter()
will return an empty array.
One-line solution :
const res = x.map((a, index) => ({ ...a, children: a.children.map((b, i) => y.find(o => o.id === b.id) || b) }));
Code snippet :
let x = [
{
id: 'Abc',
children: [
{
id: 12,
name: 'john'
}, {
id: 13,
name: 'dow'
}
]
}, {
id: 'xyz',
children: [
{
id: 123,
name: 'jack'
}, {
id: 134,
name: 'abc'
}
]
}
]
let y = [
{
id: 12,
name: 'mac'
}, {
id: 13,
name: 'dow'
}, {
id: 123,
name: 'Tom'
}, {
id: 134,
name: 'abc'
}
]
const res = x.map((a, index) =>
({ ...a, children: a.children.map((b, i) => y.find(o => o.id === b.id) || b) }));
console.log(res);