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

Answer 1

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
    };
})

Answer 2

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
  })
}