How to add items to an empty array in Javascript
<p>Controller sends a JSON for one Frame. I need to keep incrementing the array where Multiple Frame's score gets added. For example </p>

<p>FrameScore = f1 + f2 +.. lastF</p>

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

<pre><code>var bowlingData = {
    "frames": []
};
var frames = [];
$('#submitButton').click(function(e) {
    frames.push([$("#FirstRoll").val(), $("#SecondRoll").val()]);
    for (var ln = 0; ln &lt; 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!!!");
        }
    });
});
</code></pre>