Push values to array in jquery

Question

I have List of items data and empty array quotations :

   var data = {};
   var quotations = [];

I want to fill quotations with data values ,Every time i add new data it added successfully but all data values get last value .

for example :

 $("#addquotation").click(function () {
        debugger;
        var itemname = $("#itemname").val();
        var cost =parseFloat( $("#cost").val());
        var notes = $("#notes").val();
        var date = $("#date").val();


        data.Item = itemname;
        data.Cost = cost;
        data.Notes = notes;
        data.Date = date;

        quotations.push(data);
)};

for first time i add

"test,45,testnotes,2016-02-03" Second time i 've added "test2,45.2,testnotes2,2016-02-05"

when i debug i get data as :

obj(0): "test2,45.2,testnotes2,2016-02-05" obj(1):"test2,45.2,testnotes2,2016-02-05"

it seems it append last version to all data

Please Advice . Thanks

Answer 1

You need to declare data inside the click handler, if it's declared as a global variable you are basically always modifying and adding the same data object to the array:

var quotations = [];

$("#addquotation").click(function () {
        debugger;
        var data = {};
        var itemname = $("#itemname").val();
        var cost =parseFloat( $("#cost").val());
        var notes = $("#notes").val();
        var date = $("#date").val();


        data.Item = itemname;
        data.Cost = cost;
        data.Notes = notes;
        data.Date = date;

        quotations.push(data);
)};

Answer 2

You are pushing the same object reference each time since you declared data outside of the click handler.

Change from :

var data={};
$("#addquotation").click(function () {

To

$("#addquotation").click(function () {
     var data={};// declare local variable

Answer 3

The problem is that data is a global variable and you add a reference to data to quotations .

When the first value is pushed to quotations , data and quotations[0] refer to the same object. Here is an example of what is happening:

var a = {num: 1};
var b = a;
b.num = 2;
console.log(a.num); // prints 2

The same thing happens when an object is pushed to an array. quotations does not contain a copy of data , it contains a reference to data so that modifying data also modifies quotations . To fix this, each element of quotations must refer to a different data object. This can be accomplished by defining data inside of the function instead of outside.

Replace

var data = {};
$("#addquotation").click(function() {
    // populate data, push to quotations
});

with

$("#addquotation").click(function() {
    var data = {};
    // populate data, push to quotations
});