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 (i.e. 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(i.e. 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()
});

1) To create new array which, you cannot iterate over, you can use array constructor:

Array(100) or new Array(100)

2) You can create new array, which can be iterated over like below:

a) All JavaScript versions

• Array.apply: Array.apply(null, Array(100))

b) From ES6 JavaScript version

• Destructuring operator: [...Array(100)]
• Array.prototype.fill Array(100).fill(undefined)
• Array.from Array.from({ length: 100 })

You can map over these arrays like below.

• Array(4).fill(null).map((u, i) => i) [0, 1, 2, 3]

• [...Array(4)].map((u, i) => i) [0, 1, 2, 3]

• Array.apply(null, Array(4)).map((u, i) => i) [0, 1, 2, 3]

• Array.from({ length: 4 }).map((u, i) => i) [0, 1, 2, 3]

You don't need jQuery for that. Use regular javascript

var arr = new Array();
// or var arr = [];
arr.push('value1');
arr.push('value2');

Note: In javascript, you can also use Objects as Arrays, but still have access to the Array prototypes. This makes the object behave like an array:

var obj = new Object();
Array.prototype.push.call(obj, 'value');

will create an object that looks like:

{
    0: 'value',
    length: 1
}

You can access the vaules just like a normal array f.ex obj[0].