Javascript array contain same object multiples times when i update the object at index 0 it automatically updates the object at index 1?

Question

you can see that the ruleCounter property in object being inserted is 1 and after insertion in the array we can see that the ruleCounter property has value 1 Then I try to insert same object but this time ruleCounter has a value of 2 but magically in the array you can see that the value of ruleCounter in both objects in the array becomes 2

please help why the values of ruleCounter in different index of the array gets automatically updated

var droppedObjects = []; //this array will contain the list of rules dropped on the drop zone area.
    $scope.onDropComplete1 = function(data, evt) {
        ruleCounter++;
        data.ruleCounter= ruleCounter;
        console.log(data);
        //var index = $scope.droppedObjects.indexOf(data);
        if (data !== null) {
            droppedObjects.push(data); //droping data into the array when drag and drop is complete
            console.log(droppedObjects);
        } else {
            //console.log($scope.droppedObjects1);
        }

    };

please provide your code . it can't be said by this screenshot only — Anik Islam Abhi, Dec 17 '15 at 08:02
probably modifying an object and pushing it ... end up with the same object twice — Jaromanda X, Dec 17 '15 at 08:05
this is a drag and drop feature i am building in angular js where multiple instances of same object can be dragged and drooped — selftaught91, Dec 17 '15 at 08:08
you are pushing object without cloning it . it'll keep reference — Anik Islam Abhi, Dec 17 '15 at 08:08
means everytime i push the object i need to clone that then update my ruleCounter value and then push in the array. — selftaught91, Dec 17 '15 at 08:11
Possible duplicate: [New objects get overwritten when being added to an array](http://stackoverflow.com/a/32264703/240443), paying particular attention to the metaphor at the end of my answer :P — Amadan, Dec 17 '15 at 08:11

score 1 · Answer 1 · answered Dec 17 '15 at 08:26

In javascript complex objects are passed by reference. This mean that if you have:

var objectA = {/* your properties */};
var objectB = objectA;

Both variables hold a reference to the same object. Thus if you change a property in using any of those variables you are changing the value in the other variable at the same time. You will need to create copies of the object if you want to keep different states.

var objectA = {/* your properties */};
var objectB = new Object(objectA); // or Object.create(objectA)

Now both are different object and you can change their properties independently.

Javascript array contain same object multiples times when i update the object at index 0 it automatically updates the object at index 1?

1 Answers1

Linked

Related