Javascript array with for loop, returns only last element

Question

I have a for loop, that adds data into an array. but when I console.log the array, it is full of the last item of the for loop!

Here is my code :

var materialsData = results[1].data, // results[1].data is a http.get return
ln = Object.size(materialsData),
materials = [],
material = {};
material['Product'] = {};

for (var i = 0; i < ln; i++) {
    material.Product['Name'] = materialsData[i].Product.Name;
    material.Product['Id'] = materialsData[i].Product.Id;
    material.StartingDate = materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-');
    material.Device = materialsData[i].Device;
    materials.push(material);
}

Objects are passed by reference. So every iteration, you are overriding same variable — Rajesh Dixit
– Rajesh Dixit, Commented Jan 16, 2017 at 11:40

Satpal · Accepted Answer · 2017-01-16 11:48:15Z

5

Define material in the for block. As Objects are passed by reference same object is updated and pushed to the array.

for (var i = 0; i < ln; i++) {
    var material = {
        Product : {
            Name : materialsData[i].Product.Name,
            Id : materialsData[i].Product.Id,
        },
        StartingDate : materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-'),
        Device : materialsData[i].Device
    };
    materials.push(material);
}

Additionally, You can use Array.map()

var materials = materialsData.map(function(m){
    return {
        Product : {
            Name : m.Product.Name,
            Id : m.Product.Id,
        },
        StartingDate : m.StartingDate.replace("T00:00:00", "").split('-').reverse().join('-'),
        Device : m.Device
    };
})

edited Jan 16, 2017 at 11:48

answered Jan 16, 2017 at 11:42

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav C Balan · Accepted Answer · 2017-01-16 11:48:14Z

You are updating and pushing the same object reference again and again so the object holds the last element values. Instead, initialize the object holding variable inside the for loop beginning.

for(var i=0; i<ln; i++){
  // initialize the object
  var material = { Product : {}, Id : {}};

  material.Product['Name'] = materialsData[i].Product.Name;
  material.Product['Id'] = materialsData[i].Product.Id;
  material.StartingDate = materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-');
  material.Device = materialsData[i].Device;
  materials.push(material);
}

Or directly define the object as the argument of push method without holding it to any variable.

for (var i = 0; i < ln; i++) {
  materials.push({
    Product: {
      Name: materialsData[i].Product.Name,
      Id: materialsData[i].Product.Id,
    },
    StartingDate: materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-'),
    Device: materialsData[i].Device
  })
}

brandon musa · Accepted Answer · 2021-05-05 09:40:57Z

You are indeed referencing the same object. For me the trick was to wrap the object in question around JSON.stringify() and then within the loop I call JSON.parse() on the resulting string to turn it back

var materialsDataString = JSON.stringify(results[1].data), // results[1].data is a http.get return
ln = Object.size(materialsData),
materials = [],
material = {};
material['Product'] = {};

for (var i = 0; i < ln; i++) {
    var materialsData = JSON.parse(materialsDataString)
    material.Product['Name'] = materialsData[i].Product.Name;
    material.Product['Id'] = materialsData[i].Product.Id;
    material.StartingDate = materialsData[i].StartingDate.replace("T00:00:00", "").split('-').reverse().join('-');
    material.Device = materialsData[i].Device;
    materials.push(material);
}

.

Collectives™ on Stack Overflow

Javascript array with for loop, returns only last element

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related