Prevent 2 Way Binding of a Variable

Question

Below is my code:

var laData = [{fname:"India"}, {fname: "Germany"}];
function modifyData(iaData) {
    for (var i = 0; i < iaData.length; i += 1) {
        var loNode = {};
        loNode = iaData[i];
        loNode.states= [];
    }
}
modifyData(laData);

In the Output I can see that [{"fname":"India","states":[]},{"fname":"Germany","states":[]}] the states node is getting appended to the Original Array laData.

Question: How do I prevent "States" node to be appended to the laData?

I need to make some modifications inside the function. That is why I am looping over iaData. But the moment I do loNode.states = [], the importing array iaData gets changed. It seems to be a 2 way binding, which I want to prevent. So, the main output I want is - [{fname:"India"}, {fname: "Germany"}] — Dhrubajyoti, Feb 21 '16 at 08:31
`loNode = iaData[i];` refers to original object, so it modifies `laData` — Jagdish Idhate, Feb 21 '16 at 08:31
Objects (incl. arrays) are passed by reference in javascript -- In your function, clone the object and make your modifications to the new one. — Hypaethral, Feb 21 '16 at 08:35

score 0 · Answer 1 · answered Feb 21 '16 at 08:32

0

You just have to remove one line:

var laData = [{fname:"India"}, {fname: "Germany"}];
function modifyData(iaData) {
   for (var i = 0; i < iaData.length; i += 1) {
        var loNode = {};
        loNode = iaData[i];
        //loNode.states= []; <-- remove this line
    }
}
modifyData(laData);

The commented line is the one adding an empty array to your node. If you remove it, you will get the structure you wants

answered Feb 21 '16 at 08:32

Damien Fayol

958
7
17

I thought this was the answer too, but then what's the point of the function? All it does is temporarily waste memory by creating new dictionaries... – CzechErface Feb 21 '16 at 08:33
this is not what the OP wants, he wants to modify the data. removing the line which modifies the data will not serve his purpose – Rajshekar Reddy Feb 21 '16 at 08:34
Yes, that was the part of the question i was answering actually. – Damien Fayol Feb 21 '16 at 08:37
Well the requirement is to create another Temp Array which needs the node states to be added. This can be easily done, but once the local variable loNode is updated with a node states, the importing array iaData gets updated. I want to prevent iaData to be updated – Dhrubajyoti Feb 21 '16 at 08:41
Yes, it's because object are passed by reference, so you have to clone it first, the edit the clone and return it. – Damien Fayol Feb 21 '16 at 08:45

Rajshekar Reddy · Accepted Answer · 2016-02-22T02:15:56.270

0

Solution using Jquery.

 var laData = [{fname:"India"}, {fname: "Germany"}];

    function modifyData(iaData) {
    var modifiedData = [];
        for (var i = 0; i < iaData.length; i += 1) {
            var loNode = {};
            loNode = $.extend(true, {}, iaData[i]); //Doing a Deep copy of the object
            loNode.states= [];
            modifiedData.push(loNode);
        }
        return modifiedData;
    }

    var modifiedData = modifyData(laData);
    console.log("Original Data:");
    console.log(laData);
    console.log("Modified Data");
    console.log(modifiedData);

Check your browser console to see the different outputs.

You can see that the output of the initial object does not have states appended to it. and Here is the working JSFiddle

edited Feb 22 '16 at 02:15

answered Feb 21 '16 at 08:38

Rajshekar Reddy

18,647
3
40
59

Thanks Reddy...CzechErface and Damien...Its solved my prob :) – Dhrubajyoti Feb 21 '16 at 08:51
Downvoters please care to comment my mistake. – Rajshekar Reddy Feb 21 '16 at 08:53
1

@Reddy http://meta.stackoverflow.com/questions/252009/should-there-be-a-deterrent-for-answering-obvious-duplicate-questions along with other meta discussions... different people have different opinions on how to treat the answers to duplicated questions, and you seem to have encountered an opinionated user or two – Hypaethral Feb 21 '16 at 09:21
@GrumbleSnatch thanks for the link, I went through it and still I am surprised that I got a downvote!! Well common guys I answered it prior to marking as duplicate. Do you expect me to have track of all questions being asked on SO – Rajshekar Reddy Feb 21 '16 at 09:34
1

You might want to mention that this solution requires jQuery. – JJJ Feb 21 '16 at 15:54

Prevent 2 Way Binding of a Variable

2 Answers2