如何在JavaScript中将项目添加到空数组

Question

Controller sends a JSON for one Frame. I need to keep incrementing the array where Multiple Frame's score gets added. For example

FrameScore = f1 + f2 +.. lastF

Issue The values do not get added and shows data for each Frame only. Where am I doing it wrong?

var bowlingData = {
    "frames": []
};
var frames = [];
$('#submitButton').click(function(e) {
    frames.push([$("#FirstRoll").val(), $("#SecondRoll").val()]);
    for (var ln = 0; ln < frames.length; ln++) {
        var temp = {
            "firstroll": $("#FirstRoll").val(),
            "secondroll": $("#SecondRoll").val()
        };
        bowlingData.frames.push(temp);
    }
    console.log("temp data: " + temp);
    bowlingData.frames.push(temp);
    var element = this;
    $.ajax({
        url: "/Home/Submit",
        type: "POST",
        data: JSON.stringify(bowlingData),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function(data) {
            var parseData = JSON.parse(data);
            console.log("MyDate: " + data.score);
            console.log("Parse" + parseData);
            $("#lblTotalScore").text(parseData.score);
            $("#FirstRoll").val("");
            $("#SecondRoll").val("");
        },
        error: function() {
            alert("An error has occured!!!");
        }
    });
});

Answer 1

Apparently the solution is

var frameArray= [];
frameArray.push("#FirstRoll");
frameArray.push("#SecondRoll");

But that is to add single elements to the array. If the input is [[2, 3],[4, 5],...] then the JSON object representation would be

{ "frames": [{"first": 2, "second": 3}, {"first": 4, "second": 5}, ... ] } 

However, there was another issue of not getting the correct response from the controller.

The issue here is that an empty array is created (ie frames) and on the 3rd line the value was pused to the empty Array . Although the the for loop was adding each element to the Array (ie frames) but when the response was created the recent input was replacing the previous input, because the JSON object bowlingData was holding temp data only. So no need to create any Array to increment multiple input result. Initial value would be hold by the browser and second input would be added in next submit.

Was

var frames = [];
$('#submitButton').click(function(e) {
frames.push([$("#FirstRoll").val(), $("#SecondRoll").val()]);
for (var ln = 0; ln < frames.length; ln++) {
    var temp = {
        "firstroll": $("#FirstRoll").val(),
        "secondroll": $("#SecondRoll").val()
    };
    bowlingData.frames.push(temp);
}

Should be

$('#submitButton').click(function (e) {

bowlingData.frames.push({
   "firstroll": $("#FirstRoll").val(),
   "secondroll": $("#SecondRoll").val()
});