Generating a fresh object derived from an existing object without saving any modifications

Question

Generating a fresh object derived from an existing object without saving any modifications

I am facing an issue with using an Array to store boilerplate objects that can be copied, modified, and added to another Array. The problem arises when the new Array takes ownership of the object, causing changes to persist in the original object.

For example:

var originals = [{ name: "One", value: 1 }, { name: "Two", value: 2 }, { name: "Three", value: 3 }];

var notOriginal = [];

notOriginal.push(originals[0]);

// This results in - notOriginal = [{ name: "One", value: 1 }];

notOriginal[0].name = "Uno";

// As a result - originals = [{ name: "Uno", value: 1 },...];

I want to ensure that the "originals" variable remains unchanged throughout this process.

Although I have searched extensively online and tried various solutions, I am still struggling to find a proper fix for this issue.

This behavior is particularly noticeable in VueJS when dealing with object manipulation within my data().

javascript vue.js

Answer 1

Answer №1

Create a duplicate of the data by utilizing JSON.parse & JSON.stringify

var originals = [{
  name: "One",
  value: 1
}, {
  name: "Two",
  value: 2
}, {
  name: "Three",
  value: 3
}];

var notOriginal = [];

notOriginal.push(JSON.parse(JSON.stringify(originals[0])));



notOriginal[0].name = "Uno";
console.log(originals)

Answer 2

Create a duplicate of the data by utilizing JSON.parse & JSON.stringify

var originals = [{
  name: "One",
  value: 1
}, {
  name: "Two",
  value: 2
}, {
  name: "Three",
  value: 3
}];

var notOriginal = [];

notOriginal.push(JSON.parse(JSON.stringify(originals[0])));



notOriginal[0].name = "Uno";
console.log(originals)

Answer 3

Answer №2

One way to duplicate an object is by using the Object.assign method.

let initialObjects = [{
  title: "Apple",
  quantity: 5
}, {
  title: "Banana",
  quantity: 7
}, {
  title: "Orange",
  quantity: 3
}];

let copiedObjects = [];

copiedObjects.push(Object.assign({}, initialObjects[0]));

copiedObjects[0].title = "Pear";

console.log(initialObjects);

Answer 4

One way to duplicate an object is by using the Object.assign method.

let initialObjects = [{
  title: "Apple",
  quantity: 5
}, {
  title: "Banana",
  quantity: 7
}, {
  title: "Orange",
  quantity: 3
}];

let copiedObjects = [];

copiedObjects.push(Object.assign({}, initialObjects[0]));

copiedObjects[0].title = "Pear";

console.log(initialObjects);

Answer 5

Answer №3

Objects are passed by reference.

To create a copy of an object, you can use the Object.assign({}, obj) method. This will produce a new object with all properties duplicated from the original.

var originals = [{ name: "One", value: 1 }, { name: "Two", value: 2 }, { name: "Three", value: 3 }];

var notOriginal = originals.map(obj => Object.assign({}, obj));

notOriginal[0].name = "bart";
console.log(originals[0], notOriginal[0]);

Answer 6

Objects are passed by reference.

To create a copy of an object, you can use the Object.assign({}, obj) method. This will produce a new object with all properties duplicated from the original.

var originals = [{ name: "One", value: 1 }, { name: "Two", value: 2 }, { name: "Three", value: 3 }];

var notOriginal = originals.map(obj => Object.assign({}, obj));

notOriginal[0].name = "bart";
console.log(originals[0], notOriginal[0]);

Answer 7

Answer №4

After experimenting with jQuery.extend(true, {}, myObj), I was able to find a resolution. However, I am interested in learning the specific term for this process to deepen my understanding of reactivity.

Appreciate any insights on this topic. Thank you!

Answer 8

After experimenting with jQuery.extend(true, {}, myObj), I was able to find a resolution. However, I am interested in learning the specific term for this process to deepen my understanding of reactivity.

Appreciate any insights on this topic. Thank you!

Generating a fresh object derived from an existing object without saving any modifications

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Best practices for effectively implementing Vuex getters within the Nuxt Vue Composition API

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

serializeArray encounters difficulty in locating certain input elements

How to display an HTML element conditionally with v-if based on a variable's value

The JavaScript class failed to work properly within the asp.net framework

There are a total of 152 issues found in the index.tsx file within the react

What is required to run npm rebuild node-sass --force following each instance of a `yarn add` command?

Best Practices for Handling an Abundance of Data in React or Java

Methods for setting the value of a scope variable within a controller's function

How can I incorporate the 'client' application into the 'loading.js' file?

What is the best way to synchronize CouchDB with multiple PouchDB instances in an AngularJS application?

What is the best way to send props to a component that is exported using a Store Provider?

Validation of forms - Must include one particular word from a given set

Assign the default value of a Vue prop to the options of its parent component

Have you ever wondered why the expression `Number(new Boolean(false))` always returns `0

The style of the button label does not persist when onChange occurs

What is the best way to send a function along with personalized data?

Exploring the combination of AWS Amplify with Vue Router's history mode

having difficulty sending the username and password from the HTML page to the controller in AngularJS

Automatically choose radio buttons within an li element in a loop