Updating objects of array in array with array of Object

Question

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.

score 0 · Answer 1 · answered Jan 25 '21 at 10:22

First make loopup object for y, then use map for children for x

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 lookupY = {};
y.forEach(({ id, name }) => (lookupY[id] = name));

const newX = x.map(({ id, children }) => ({
  id,
  children: children.map((item) => ({ id:item.id, name: lookupY[item.id] })),
}));

console.log(newX)

h0ly · Accepted Answer · 2021-01-25T10:36:19.717

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

score 0 · Answer 3 · answered Jan 25 '21 at 10:25

First of all you forgot to return the result inside callback function. Then you should not lose others keys of object.

const x = [
  {
    id: 'Abc',
    children: [
      {
        id: 12,
        name: 'john'
      }, {
        id: 13,
        name: 'dow'
      }
    ]
  }, {
    id: 'xyz',
    children: [
      {
        id: 123,
        name: 'jack'
      }, {
        id: 134,
        name: 'abc'
      }
    ]
  }
];
const y = [
  {
    id: 12,
    name: 'mac'
  }, {
    id: 13,
    name: 'dow'
  }, {
    id: 123,
    name: 'Tom'
  }, {
    id: 134,
    name: 'abc'
  }
];

const newArr = x.map((a, index) => {
  const children = a.children.map((b, i) => {
    return y.find(o => o.id === b.id) || b;
  })
  return { ...a, children };
})

console.log(newArr);

Updating objects of array in array with array of Object

3 Answers3