如何在不过度使用数组中已有内容的情况下将新项目添加到javascript数组

Question

I have these 2 arrays declared

var newUnitsToGenerateObj = [];
    var newUnitsToGenerate = {
        UnitTypeID: null,
        NumOfUnits: 0
    };

in my UI I want the user to select the unitype and I want to pass it into thi newunitstogenerate then pass it into newunitstogenerateobj I thought this would be fairly simple like this

   function AddUnitsToConfig() {
        newUnitsToGenerate.UnitTypeID = $('#UnitTypeID').ejDropDownList('model.value');
        newUnitsToGenerate.NumOfUnits = $('#NumOfUnits').val();

        newUnitsToGenerateObj.push(newUnitsToGenerate);

        console.log(newUnitsToGenerateObj);
    }

so this function inserts the first value as expected when the button is clicked but if it is clicked a second time with new values this overrides what was in the array with the new data so I have a length of 2 as expected but they are the same values. I want to build up the newunitstogenerateobj then pass it to the server.

Answer 1

You're mutating newUnitsToGenerate every time you call AddUnitsToConfig . You want to push a new object into the array with each call:

function AddUnitsToConfig() {
    newUnitsToGenerateObj.push({
        UnitTypeID: $('#UnitTypeID').ejDropDownList('model.value');
        NumOfUnits: $('#NumOfUnits').val();
    });

    console.log(newUnitsToGenerateObj);
}

Answer 2

Declare an empty json. inside the function

var newUnitsToGenerateObj = [];


function AddUnitsToConfig() {
    var newUnitsToGenerate = {};
    newUnitsToGenerate['UnitTypeID'] = $('#UnitTypeID').ejDropDownList('model.value');
    newUnitsToGenerate['NumOfUnits'] = $('#NumOfUnits').val();

    newUnitsToGenerateObj.push(newUnitsToGenerate);

    console.log(newUnitsToGenerateObj);
}