How to binding value from one variable to others

Question

I have 2 variable masterdata and datatoedit. masterdata have array value and datatoedit have object value.

I want to copy data 1 from masterdata to variable datatoedit, so I write like this:

this.datatoedit = this.masterdata[0]

But when I edit data from datatoedit on form data on masterdata[0] also changed.

How to prevent masterdata[0] from changed when I edit datatoedit?

Share a detailed introduction related to your question - [js-object-copy-by-value-vs-copy-by-reference](https://stackoverflow.com/questions/19448646/js-object-copy-by-value-vs-copy-by-reference) — sugars, Aug 23 '20 at 05:49

sugars · Accepted Answer · 2020-08-23T05:36:48.523

3

You can use ES6 Spread syntax to make an object copy:

this.datatoedit = {...this.masterdata[0]}

edited Aug 23 '20 at 05:36

answered Aug 23 '20 at 05:33

sugars

1,473
7
17

is this work on vuex state too?, you know some time im copy a state from vuex too.. – Jazuly Aug 23 '20 at 05:36
The result is the same, if you modify the copied object, the original object will not be updated. – sugars Aug 23 '20 at 05:40
This can go wrong in case of deeply nested objects. – chethan7 Aug 23 '20 at 06:06

Sourav · Answer 2 · 2020-08-24T04:50:51.017

2

You can also do this using lodash function clonedeep. It will not copy the references.

data_to_edit = _.cloneDeep(masterdata[0])

You can now modify data_to_edit as your wish.

edited Aug 24 '20 at 04:50

answered Aug 23 '20 at 05:43

Sourav

393
2
18

score 2 · Answer 3 · answered Aug 23 '20 at 06:06

The accepted answer can go wrong if the masterdata elements have nested objects like

{
   name: 'John',
   age: 30,
   address: {
       street: 'ChurchStreet',
       city: 'Bangalore',
       state: 'KA'
   }
}

    var masterdata = [
        {
            name: 'John',
            age: 30,
            address: {
                street: 'ChurchStreet',
                city: 'Bangalore',
                state: 'KA'
            }
        },
        {
            name: 'Jane',
            age: 26,
            address: {
                street: 'West of Chord',
                city: 'Mumbai',
                state: 'MH'
            }
        }
    ];

    // With spread operator
    var datatoedit = {...masterdata[0]};
    datatoedit.age = 32;
    datatoedit.address.street = 'Infantry Road';

    console.log('With spread operator');
    console.log('masterdata[0]: ' + JSON.stringify(masterdata[0]));
    console.log('datatoedit: ' + JSON.stringify(datatoedit));


    // With Object.assign()
    datatoedit = Object.assign({}, masterdata[0]);
    datatoedit.age = 35;
    datatoedit.address.street = 'Brigade Road';
    console.log('With Object.assign()');
    console.log('masterdata[0]: ' + JSON.stringify(masterdata[0]));
    console.log('datatoedit: ' + JSON.stringify(datatoedit));


    // Now with JSON.parse() and JSON.stringify()
    datatoedit = JSON.parse(JSON.stringify(masterdata[0]));
    datatoedit.age = 35;
    datatoedit.address.street = 'West of Chord Road';

    console.log('With JSON.parse() and JSON.stringify()');
    console.log('masterdata[0]: ' + JSON.stringify(masterdata[0]));
    console.log('datatoedit: ' + JSON.stringify(datatoedit));

As you can see, in case of nested objects, both spread operator and Object.assign() can go wrong as they do shallow copy.

Combining JSON.parse() and JSON stringify() creates the effect of deep copy and hence it works fine all cases. (Though these functions are not meant for deep copy as such).

How to binding value from one variable to others

3 Answers3