Assign object values only using Object.assign

Question

Assign object values only using Object.assign

I have two objects. One serves as the original source object, while the other is a deep copy of the source object with potentially different values. For example:

{
  id: 123,
  people: [{
      name: "Bob",
      age: 50
   }, {
      name: "Alice",
      age: 40
  }]
}

and

{
  id: 123,
  people: [{
      name: "Bob",
      age: 51 // Bob is now older
   }, {
      name: "Alice",
      age: 40
  }]
}

Keep in mind that the object has multiple nested keys, objects and arrays.

My goal is to update the values (and only the values) from the modified copy back onto the original source object.

The key aspect here is to retain the original reference points of the source object. This means I cannot use either of the following methods:

sourceObject = updatedCopiedObject;

as it would completely replace the source object and disrupt its references

Object.assign(sourceObject, updatedCopiedObject);

since this would lead to property overwriting, violating the need to maintain original references.

What I require is the functionality of Object.assign without property overwriting - simply updating matching properties with new values.

Currently, I am unaware of any built-in method capable of achieving this recursive/deep value-changing process. While I can create a custom method to address this, I am curious if there exists a pre-existing solution to this problem.

javascript ecmascript-6

Answer 1

Answer №1

Unfortunately, I have not come across any existing built-in functions that handle this kind of recursive/deep process. While I am capable of creating a custom method to tackle this issue, I was hoping to discover an alternative solution beforehand.

Regrettably, none exist at present.

Answer 2

Unfortunately, I have not come across any existing built-in functions that handle this kind of recursive/deep process. While I am capable of creating a custom method to tackle this issue, I was hoping to discover an alternative solution beforehand.

Regrettably, none exist at present.

Answer 3

Answer №2

One way to iterate through the properties and values of an object is by using Object.entries(). This method returns key-value pairs of an object as an array. If a value itself is an object, you can recursively call the same function to reassign that property's value. Otherwise, simply set the value to be the same as the source object's property value.

let source = {
  id: 123,
  people: [{
      name: "Bob",
      age: 50
   }, {
      name: "Alice",
      age: 40
  }]
}

let copy = {
  id: 123,
  people: [{
      name: "Bob",
      age: 51 // Bob is older now
   }, {
      name: "Alice",
      age: 40
  }]
}

const reassign = (sourceObj, copyObj) =>{
  for (let [key, prop] of Object.entries(copyObj)) {
    if (typeof prop !== "object") {
      sourceObj[key] = prop;
    } else {
      reassign(sourceObj[key], prop)
    }
  }
  return [sourceObj, copyObj]
}

console.log(reassign(source, copy));

Answer 4

One way to iterate through the properties and values of an object is by using Object.entries(). This method returns key-value pairs of an object as an array. If a value itself is an object, you can recursively call the same function to reassign that property's value. Otherwise, simply set the value to be the same as the source object's property value.

let source = {
  id: 123,
  people: [{
      name: "Bob",
      age: 50
   }, {
      name: "Alice",
      age: 40
  }]
}

let copy = {
  id: 123,
  people: [{
      name: "Bob",
      age: 51 // Bob is older now
   }, {
      name: "Alice",
      age: 40
  }]
}

const reassign = (sourceObj, copyObj) =>{
  for (let [key, prop] of Object.entries(copyObj)) {
    if (typeof prop !== "object") {
      sourceObj[key] = prop;
    } else {
      reassign(sourceObj[key], prop)
    }
  }
  return [sourceObj, copyObj]
}

console.log(reassign(source, copy));

Answer 5

Answer №3

To assign the value, a combination of iterative and recursive methods can be employed.

This method examines the source object, creates new target properties as needed, and assigns the value if no nested object is detected.

function assignValue(target, source) {
    Object.keys(source).forEach(function(key) {
        if (source[key] && typeof source[key] === 'object') {
            return assignValue(target[key] = target[key] || Array.isArray(source[key]) ? [] : {}, source[key]);
        }
        if (target[key] !== source[key]) {
            target[key] = source[key];
        }
    });
}

var obj1 = { id: 123, people: [{ name: "Bob", age: 50 }, { name: "Alice", age: 40 }] }, obj2 = { id: 123, people: [{ name: "Bob", age: 51 }, { name: "Alice", age: 40 }] };

assignValue(obj1, obj2);
console.log(obj1);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 6

To assign the value, a combination of iterative and recursive methods can be employed.

This method examines the source object, creates new target properties as needed, and assigns the value if no nested object is detected.

function assignValue(target, source) {
    Object.keys(source).forEach(function(key) {
        if (source[key] && typeof source[key] === 'object') {
            return assignValue(target[key] = target[key] || Array.isArray(source[key]) ? [] : {}, source[key]);
        }
        if (target[key] !== source[key]) {
            target[key] = source[key];
        }
    });
}

var obj1 = { id: 123, people: [{ name: "Bob", age: 50 }, { name: "Alice", age: 40 }] }, obj2 = { id: 123, people: [{ name: "Bob", age: 51 }, { name: "Alice", age: 40 }] };

assignValue(obj1, obj2);
console.log(obj1);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 7

Answer №4

After reading guest271314's explanation, I was able to create a modified recursive function to transfer only the "values" from one object to another. In my specific scenario, I had to make adjustments to handle arrays nested within the objects:

copyValues (target = {}, source) {
  let newValue = null
  let keysArray = Object.keys(source)
  for (let keyName of keysArray) {
    newValue = source[keyName]
    if (typeof newValue === 'object' && newValue !== null) {
      if (Object.prototype.toString.call(newValue) === '[object Array]') {
        target[keyName] = newValue
      } else {
        copyValues(target[keyName], newValue)
      }
    } else {
      target[keyName] = newValue
    }
  }
  return target
}

Answer 8

After reading guest271314's explanation, I was able to create a modified recursive function to transfer only the "values" from one object to another. In my specific scenario, I had to make adjustments to handle arrays nested within the objects:

copyValues (target = {}, source) {
  let newValue = null
  let keysArray = Object.keys(source)
  for (let keyName of keysArray) {
    newValue = source[keyName]
    if (typeof newValue === 'object' && newValue !== null) {
      if (Object.prototype.toString.call(newValue) === '[object Array]') {
        target[keyName] = newValue
      } else {
        copyValues(target[keyName], newValue)
      }
    } else {
      target[keyName] = newValue
    }
  }
  return target
}

Assign object values only using Object.assign

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Discovering the country associated with a country code using ngx-intl-tel-input

Deactivating elements on a website

What is the best way to establish a conditional statement that ensures ajax fetches the correct XML document?

Issues with AngularJS functionality have been noticed in Chrome browsers on both Mac and Windows platforms, with Safari being

How to Upload Your Avatar Image with the Stream-Chat API from GetStream.io

Regularly updating a book's interactive pages with turn.js technology

Accessing data from a JSON file within a JavaScript program

Chrome fails to apply CSS to Polymer 2 web component

What is the best way to incorporate a transition effect into a flex item with a specified max-width, where the width adjustments are managed by a child div?

Display the console.log output directly on the document instead of the console

React component fails to render even after successful authentication check

The href attribute is not functioning correctly on Internet Explorer version 8

Achieve the effect of "background-attachment: fixed" using a div element

The API has been triggered twice

What is the best approach for sending a single mail value to the backend when there are multiple inputs in an Axios post request?

What is the best way to apply lodash's max function to a jQuery array?

Tips for integrating a custom class file in NestJS without compromising the NestJS conventions

Deregister channel listener

Using React.js to dynamically display or hide elements generated within a component

Creating Positioning Magic with HTML Elements