Odd replication occurring while storing object attributes in an array

Question

Odd replication occurring while storing object attributes in an array

I am trying to iterate through an object, make changes to each property, and then add them to an array. Each property is added multiple times (in the JSFiddle example, I have set it to be added twice for simplicity). Each iteration should have some unique properties modified (the JSFiddle only shows modification of the 'number' property).

However, I am facing an issue where all the objects pushed in a single loop end up with identical properties. I am looking for a solution to address this problem.

Apologies for any language barriers, explaining the issue can be challenging and it would be easier to understand by looking at the JSFiddle.

Current output:

[{ x: 1, number: 1 },  
{ x: 1, number: 1 },  
{ y: 2, number: 1 },  
{ y: 2, number: 1 },  
{ z: 3, number: 1 },  
{ z: 3, number: 1 }]

Desired output:

[{ x: 1, number: 0 },
{ x: 1, number: 1 },
{ y: 2, number: 0 },
{ y: 2, number: 1 },
{ z: 3, number: 0 },
{ z: 3, number: 1 }]

Code:

var items = { 
  "a": {
    "x": 1
  },
  "b": {
    "y": 2
  },
  "c": {
    "z" : 3
  }
};

var something = [];

for ( var key in items ) {
  var item = items[key];
  if ( items.hasOwnProperty(key) ) {
    for ( var i = 0; i < 2; i++ ) {
      item.number = i;
      something.push(item);
    }
  }
}

console.log(something);

javascript arrays javascript-objects

Answer 1

Answer №1

Let's break it down with a dry run example. In the loop below, we start by selecting the first key "a" from your 'items' object. Now, let's delve into the loop:

    for ( var key in items ) {

      // Key is now set to "a"
      
     var item = items[key]; 

     // The variable 'item' now points to the object items["a"], which is {"x":1}

      if ( items.hasOwnProperty(key) ) {
        for ( var i = 0; i < 2; i++ ) {

          // During the 1st iteration, 'item' refers to {"x":1}
          // During the 2nd iteration, 'item' refers to {"x":1,"number":0} (updated in the previous iteration)

          item.number = i;

         // In the 1st iteration, 'item' receives the "number" property, resulting in {"x":1,"number":0} in memory
         // In the 2nd iteration, it continues to modify the same object, leading to {"x":1,"number":1}


          something.push(item);
          // In the 1st iteration, a reference to the object is added to 'something'
          // In the 2nd iteration, another reference to the object is added to 'something' 
          // Both references essentially point to the same object.

        }
      }
    }

If you want the desired output, you should create a copy of your object instead of multiple references. Cloning objects in JavaScript can be tricky. Check out this link for more information: How do I correctly clone a JavaScript object?

A simple solution for your current code would be to implement a clone function that handles deep-cloning issues and prototype-inherited properties. Here's the updated code snippet:

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}
var items = {
  "a": {
    "x": 1
  },
  "b": {
    "y": 2
  },
  "c": {
    "z" : 3
  }
};



var something = [];

for ( var key in items ) {
  var item = items[key];

  if ( items.hasOwnProperty(key) ) {
    for ( var i = 0; i < 2; i++ ) {
      var tempItem = clone(item);
      tempItem.number = i;
      something.push(tempItem);
    }
  }
}

console.log(something);

If you found this helpful, feel free to upvote.

Answer 2

Let's break it down with a dry run example. In the loop below, we start by selecting the first key "a" from your 'items' object. Now, let's delve into the loop:

    for ( var key in items ) {

      // Key is now set to "a"
      
     var item = items[key]; 

     // The variable 'item' now points to the object items["a"], which is {"x":1}

      if ( items.hasOwnProperty(key) ) {
        for ( var i = 0; i < 2; i++ ) {

          // During the 1st iteration, 'item' refers to {"x":1}
          // During the 2nd iteration, 'item' refers to {"x":1,"number":0} (updated in the previous iteration)

          item.number = i;

         // In the 1st iteration, 'item' receives the "number" property, resulting in {"x":1,"number":0} in memory
         // In the 2nd iteration, it continues to modify the same object, leading to {"x":1,"number":1}


          something.push(item);
          // In the 1st iteration, a reference to the object is added to 'something'
          // In the 2nd iteration, another reference to the object is added to 'something' 
          // Both references essentially point to the same object.

        }
      }
    }

If you want the desired output, you should create a copy of your object instead of multiple references. Cloning objects in JavaScript can be tricky. Check out this link for more information: How do I correctly clone a JavaScript object?

A simple solution for your current code would be to implement a clone function that handles deep-cloning issues and prototype-inherited properties. Here's the updated code snippet:

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}
var items = {
  "a": {
    "x": 1
  },
  "b": {
    "y": 2
  },
  "c": {
    "z" : 3
  }
};



var something = [];

for ( var key in items ) {
  var item = items[key];

  if ( items.hasOwnProperty(key) ) {
    for ( var i = 0; i < 2; i++ ) {
      var tempItem = clone(item);
      tempItem.number = i;
      something.push(tempItem);
    }
  }
}

console.log(something);

If you found this helpful, feel free to upvote.

Odd replication occurring while storing object attributes in an array

Answer №1

Similar questions

FireFox is unresponsive to OPTIONS requests

Dependable timekeeping tool for an online discussion platform

Creating a compact array from a larger array in JavaScript

What could be causing my bootstrap-switch to malfunction?

Deleting items from an array while iterating in Swift 5.1 without needing to reverse

Creating a mask overlay that covers the entire screen while excluding a specific sibling div

Transforming a static material table into a dynamic one

Validator returns undefined when expressing invalid data

Attempting to swap out the text of a menu item with an icon when it is selected

Setting up TypeScript in an Angular 2 project and integrating Facebook login

Tips for swapping out textures imported from Collada with ShaderMaterial textures in Three.js

Tips for testing React Final Form's Field Components on a unit level

How can you conceal an object based on specific conditions in JavaScript?

Obtain Data Grid from Website

How to extract a column as an array from an Excel file using Python

Bootstrap 4 - DropDown option - Element is positioned above the navigation bar

Utilize JavaScript to transform an array into an object using destructuring

Updating the TextField in React Material UI based on the Slider value without affecting the Slider

What is the best way to ensure a jQuery UI slider recognizes when the mouse is released after being clicked?

What steps should I take to ensure that model updates are applied by NgJsTree?