javascriptarraysjsones6-modulesjsobject

Updating objects of array in array with array of Object


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.


Solution

  • 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);