Utilizing the object spread feature in JavaScript on an object that contains properties with potentially undefined data objects

Question

Utilizing the object spread feature in JavaScript on an object that contains properties with potentially undefined data objects

Hey there, I'm currently in the process of populating an empty placeholder object which serves as a v-model for vue, although this particular detail is not crucial to the issue at hand. The object that I am extending the original one with might contain undefined objects within it. However, it is important for me to maintain the structure of the initial object regardless of what the incoming one looks like.

For instance, let's consider Object 1:

let object1 = { a : '', b : '', c : {name : 'Mark', title: 'Mr'}}

And then we have Object 2, which could sometimes appear like this:

let object2 = { a : 'AAA', b : 'BBB', c : undefined}

My goal is to preserve the structure of object 1 even if object 2 has the property c set as undefined. So, in this scenario:

let object1 = { a : 'AAA', b : 'BBB', c : {name : 'Mark', title: 'Mr'}}

Thank you for your assistance!

javascript vue.js spread-syntax

Answer 1

Answer №1

One way to approach this is by incorporating object2 as the first element and then introducing the property c as the second:

  object1={...object2,c:object1.c}

Alternatively,

   object1={...object2,  c : object2.c ? object2.c : object1.c}

Answer 2

One way to approach this is by incorporating object2 as the first element and then introducing the property c as the second:

  object1={...object2,c:object1.c}

Alternatively,

   object1={...object2,  c : object2.c ? object2.c : object1.c}

Answer 3

Answer №2

To utilize spread syntax effectively, consider creating a helper proxy function that selectively filters out keys with values equal to undefined

let object1 = {a: '', b: '', c: {name: 'Mark', title: 'Mr'}}

let object2 = {a: 'AAA', b: 'BBB', c: undefined}

const result = { ...defined(object1), ...defined(object2) }

console.log(result)

function defined(obj) {
  return new Proxy(obj, {
    ownKeys() {
      return Object.keys(obj).filter(key => obj[key] !== undefined)
    }
  })
}

Answer 4

To utilize spread syntax effectively, consider creating a helper proxy function that selectively filters out keys with values equal to undefined

let object1 = {a: '', b: '', c: {name: 'Mark', title: 'Mr'}}

let object2 = {a: 'AAA', b: 'BBB', c: undefined}

const result = { ...defined(object1), ...defined(object2) }

console.log(result)

function defined(obj) {
  return new Proxy(obj, {
    ownKeys() {
      return Object.keys(obj).filter(key => obj[key] !== undefined)
    }
  })
}

Utilizing the object spread feature in JavaScript on an object that contains properties with potentially undefined data objects

Answer №1

Answer №2

Similar questions

Ensure that the focus() function is called only after the completion of the jQuery append

Show Angular if it is in the array

Generate a personalized design with just a snippet of an image

Converting a unix timestamp to a Date in TypeScript - a comprehensive guide

List of dates in React Native for Today and Tomorrow

methods for converting and saving base64 image strings

Encountering an error when using Angular Material virtual scroll in conjunction with Angular-UI

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

Choosing between creating a class with a shared instance or not

Vuetify - Implementing a Sidebar Menu with Expandable Submenus

What is the most effective way to append a new key-value pair to the end of an OrderedMap?

Struggling to dynamically update the URL within a "a href" tag, JavaScript is failing to reflect the changes in the output

Delete an item without a guardian

Tips for setting up a select dropdown in AngularJS using ng-options when the value is an object

The parent navigation bar in HTML and CSS is hogging more space compared to its children

Prevent hovering on the date picker header

Received an error stating "Uncaught TypeError: Unable to access the property 'PropTypes' of undefined" while encountering problems with React Bootstrap. Additionally, facing issues with ReactDOM not being defined due to

What is the best way to structure a web server along with a socket.io server?

jQuery DatePicker Not Displaying Calendar

Using Jquery to Insert Numbers Inside Brackets to Selection