title: How to add items to an empty array in Javascript
body: <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>