jquery - How to add items to an empty array in Javascript - Stack Overflow

admin管理员组

文章数量:1316980

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

Share Improve this question Follow edited Jan 31, 2016 at 16:31 rrk 15.9k44 gold badges3030 silver badges4747 bronze badges asked Jan 31, 2016 at 16:19 PineConePineCone 2,3531313 gold badges4242 silver badges8888 bronze badges 9

• "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

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： jqueryHow to add items to an empty array in JavascriptStack Overflow