Updating an array of objects within an array using another array of objects

Question

Updating an array of objects within an array using another array of objects

There are two JavaScript Arrays:

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

The goal is to update Array x with the data in Array y, resulting in the following updated array:

[
    {
        id: 'Abc',
        children: [
            {
                id: 12,
                name: 'mac'
            }, {
                id: 13,
                name: 'dow'
            }
        ]
    }, {
        id: 'xyz',
        children: [
            {
                id: 123,
                name: 'Tom'
            }, {
                id: 134,
                name: 'abc'
            }
        ]
    }
]

An attempt was made using this solution:

x.map((a, index)=>{
    a.children.map((b, i)=>{
        // console.log('update')
        y.find(o => o.id === b.id) || b;
    })
})

However, the result was an undefined value. Further exploration for a solution has been unsuccessful.

javascript arrays json es6-modules jsobject

Answer 1

Answer №1

const updatedArray = x.map((a, index)=>{
    a.children.map((b, i)=>{
        // console.log('update')
        y.find(o => o.id === b.id) || b;
    })
})

Before we proceed, let's address a common error made when using an array function: Curly braces {} are not necessary for single-line statements; however, the return keyword must be explicitly included.

arr.filter(v => v === 2) is equivalent to

arr.filter(v => {return v === 2})

. Omitting return will result in filter() returning an empty array.

Here's a concise solution :

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

Snippet of code :

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 updatedResult = x.map((a, index) => 
  ({ ...a, children: a.children.map((b, i) => y.find(o => o.id === b.id) || b) }));

console.log(updatedResult);

Answer 2

const updatedArray = x.map((a, index)=>{
    a.children.map((b, i)=>{
        // console.log('update')
        y.find(o => o.id === b.id) || b;
    })
})

Before we proceed, let's address a common error made when using an array function: Curly braces {} are not necessary for single-line statements; however, the return keyword must be explicitly included.

arr.filter(v => v === 2) is equivalent to

arr.filter(v => {return v === 2})

. Omitting return will result in filter() returning an empty array.

Here's a concise solution :

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

Snippet of code :

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 updatedResult = x.map((a, index) => 
  ({ ...a, children: a.children.map((b, i) => y.find(o => o.id === b.id) || b) }));

console.log(updatedResult);

Answer 3

Answer №2

To start, create a lookup object for y and then utilize the map function to iterate through the children of 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)

Answer 4

To start, create a lookup object for y and then utilize the map function to iterate through the children of 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)

Answer 5

Answer №3

Initially, remember to include the return statement within the callback function. Also ensure that you do not lose any other keys in the 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);

Answer 6

Initially, remember to include the return statement within the callback function. Also ensure that you do not lose any other keys in the 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 an array of objects within an array using another array of objects

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to activate a JavaScript function once a page has finished loading?

Tips for creating a navigation bar item that displays a component depending on its active state

Swipe JS: tap on the edge to view the next item

Creating an AJAX function to display a popup window for users who are already registered - here's how!

What is the best way to break a string based on a specific delimiter?

Click-o-Meter: Tracking Button Presses

Executing a Cron Job several times daily, each and every day

Strategies for efficiently parsing JSON in HTML using AngularJS

Attempting to streamline this particular JavaScript function

The element's height appears to be fluctuating unexpectedly when I attempt to adjust it using percentage values within a narrow range

How to find a collision between a spherical object and a triangular shape in a three

Manipulating rows [using an input field] within a table

Tips on how to Parse Multiple Json Files in Java

Tips for inserting a personalized image or icon into the ANTD Design menu

Store text in a C# array by reading individual words

Navigate to link based on selected option in Bootstrap select menu

Tips for parsing a json decoded array using php

How can I implement Before() and After() hooks within a hooks.js file for a Selenium and JavaScript project?

Ways to create a group label to modify various textboxes when a click event occurs

Having trouble connecting to Docker? The webpage at localhost seems to be unresponsive and is not providing any data. Error: ERR_EMPTY_RESPONSE