Refresh a collection of objects with a new set of objects

Question

Refresh a collection of objects with a new set of objects

Is there a way to update an array of objects with values from another array of objects?

Consider these two arrays:

const originalArray = [
  {id:'a',html:'',user:''},
  {id:'b',html:'',user:''},
  {id:'c',html:'',user:''},
];

const newArray = [
  {id:'a',html:'',user:''},
  {id:'b',html:'',user:''},
  {id:'c',html:'',user:''},
  {id:'d',html:'<p>Hello World</p>',user:'TEST USER'},
  {id:'e',html:'<p>Hello World TWO</p>',user:'TEST USER TWO'},
];

I am looking to merge the new values from newArray into originalArray.

The expected result should be:

[
  {id:'a',html:'<p>Hello World</p>',user:'TEST USER'},
  {id:'b',html:'<p>Hello World TWO</p>',user:'TEST USER TWO'},
  {id:'c',html:'',user:''},
];

javascript

Answer 1

Answer №1

Suppose you wish for objects with matching IDs to be updated, here is my approach:

Establish an object named byId that maps IDs to corresponding objects.
Iterate through the updates and use Object.assign to update the objects directly, utilizing the byId map to locate the object to update.

const byId = {};
array.forEach((obj) => byId[obj.id] = obj);
array_two.forEach((obj) => {
  if (!Object.hasOwnProperty(byId, obj.id)) {
    // Create a new object if the ID does not exist.
    byId[obj.id] = obj;
    array.push(obj);
  } else {
    // Update the existing object.
    Object.assign(byId[obj.id], obj);
  }
});

Answer 2

Suppose you wish for objects with matching IDs to be updated, here is my approach:

Establish an object named byId that maps IDs to corresponding objects.
Iterate through the updates and use Object.assign to update the objects directly, utilizing the byId map to locate the object to update.

const byId = {};
array.forEach((obj) => byId[obj.id] = obj);
array_two.forEach((obj) => {
  if (!Object.hasOwnProperty(byId, obj.id)) {
    // Create a new object if the ID does not exist.
    byId[obj.id] = obj;
    array.push(obj);
  } else {
    // Update the existing object.
    Object.assign(byId[obj.id], obj);
  }
});

Refresh a collection of objects with a new set of objects

Answer №1

Similar questions

Incorporating exotic elements into d3.js, currently visible

Improving the performance of a function that generates all possible combinations of elements within an array

Error code ERR_UNESCAPED_CHARACTERS is being returned for a basic inquiry made on a particular URL

How to manage dropdowns effectively with Selenium WebDriver in Java

Implementing a recurring interval for a timer

Maintaining jQuery Chosen multiple selection menu open while selecting multiple options

Unable to start store from localStorage during App initialization

Generating interactive elements in VUE is key

Troubleshooting problems with a JavaScript game that involves guessing numbers

Is the Vue "Unchecking" feature not properly deleting data from the array?

jQuery Modal activated only once upon clicking

The AJAX request sends the <div> element instead of the <button> element

I'm encountering an issue during the code compilation process. Can someone please point out where I am making a mistake and provide guidance on how to resolve it?

Is it possible for me to nest a Firebase collection within another collection?

React Object is throwing an error - not a function

Ways to restrict the display or height of a select HTML element

Developing an array-based multiple choice quiz

Placing numerous meshes that are mostly alike but not exactly the same in a scene

What is the best way to incorporate distinct keys into the React/Material UI Autocomplete feature?

Create geometric shapes on Google Maps version 2