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!!!");
        }
    });
});

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!!!");
        }
    });
});

• javascript
• jquery
• arrays

• "Issue The values do not get added and shows data for each Frame only." Not certain interpret Question correctly . What is purpose of calling bowlingData.frames.push(temp) twice?, within for loop , and after for loop ? Can create jsfiddle jsfiddle to demonstrate ? – guest271314 Commented Jan 31, 2016 at 16:25
• jsfiddle/xycL97a4/1 It was mistake. I was trying to add two entries toegther. When I print I can see arrays are getting added but final result prints out only current input. Not the total of old input + curent input. – PineCone Commented Jan 31, 2016 at 16:39
• See doc.jsfiddle/use/echo.html – guest271314 Commented Jan 31, 2016 at 16:40
• "It was mistake. I was trying to add two entries toegther. When I print I can see arrays are getting added but final result prints out only current input. Not the total of old input + curent input. " Is Question resolved ? – guest271314 Commented Jan 31, 2016 at 16:42
• 1 @guest271314 the issue is resolved. Thanks for checking the question. – PineCone Commented Feb 1, 2016 at 21:49

1 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 (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()
});