如何使用 for 循环将 Json object 推送到 Json 数组？

Question

I have a html table where onclick dynamically rows added. I need to convert that row textbox values into JSON array.

Note: Ajax must be used because I need to save data to sql server .

Here is my attempt.

$(function() {
  $("[id*=btnSave]").click(function() {
    $("[id*=data_table] tbody").each(function() {
      var arr = [];
      var user = {};
      for (i = 0; i <= 1; i++) {
        user.DueDate = $(this).find('tr:eq(' + i + ') td:eq(0) input').val();
        user.DueAmount = $(this).find('tr:eq(' + i + ') td:eq(1) input').val();
        arr.push(user); // Json array has every json object value
        $.ajax({
          async: true,
          cache: false,
          type: "POST",
          url: "Default.aspx/Save",
          data: JSON.stringify(user),
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(response) {
            alert("Data added successfully.");
            alert(JSON.stringify(user)); //Json object value //Alert 2
            alert(JSON.stringify(arr)); //Json array value  //Alert 3
          }
        }); //End of ajax
        return false;
      } //End of for loop
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellspacing="3" cellpadding="3" id="data_table" width="50%">
  <thead>
    <tr>
      <th width="30%">Due date</th>
      <th width="26%">Amount Due</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="30%">
        <input type="text" id="Text1" autocomplete="off" placeholder="Due Date" runat="server" />
      </td>
      <td width="25%">
        <input type="text" runat="server" id="new_Amount_1" placeholder="0.00" autocomplete="off" />
      </td>
      <td>
        <input type="button" value="Delete" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <input type="button" value="Add row" id="btnAddRow" />
        <input type="button" value="Save" id="btnSave" />
      </td>
    </tr>
  </tfoot>
</table>

I used for loop to get every dynamically added row values. My output should be like this. Alert2 Json object format

{"DueDate":"17/09/2019","DueAmount":"100"}

Alert3 Json array format

[{"DueDate":"17/09/2019","AmountDue":"100"},{"DueDate":"18/09/2019","AmountDue":"200"},{"DueDate":"19/09/2019","AmountDue":"300"}]

But in My output Alert3 I am getting first object only

[{"DueDate":"17/09/2019","DueAmount":"100"}]

What I have done wrong? I think for loop is not correct. Please help me with that.

Answer 1

Instead of looping this, you can directly use the serializeArray or serialize if you need a custom format

 $("form").on("submit", function(event) { event.preventDefault(); console.log($(this).serializeArray()); $.ajax({ async: true, cache: false, type: "POST", url: "Default.aspx/Save", data: JSON.stringify($(this).serializeArray()), contentType: "application/json; charset=utf-8", dataType: "json", success: function(response) { console.log("Data added successfully."); } }); //End of ajax });

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <form> <table cellspacing="3" cellpadding="3" id="data_table" width="50%"> <thead> <tr> <th width="30%">Due date</th> <th width="26%">Amount Due</th> <th></th> </tr> </thead> <tbody> <tr> <td width="30%"> <input type="text" name="Text1" autocomplete="off" placeholder="Due Date" runat="server" /> </td> <td width="25%"> <input type="text" runat="server" name="new_Amount_1" placeholder="0.00" autocomplete="off" /> </td> <td> <input type="button" value="Delete" /> </td> </tr> </tbody> <tfoot> <tr> <td> <input type="button" value="Add row" id="btnAddRow" /> <input type="submit" value="Save" id="btnSave" /> </td> </tr> </tfoot> </table> </form>

Answer 2

Yes, you can use.serialize() or.serializeArray() and these two functions only runs on a form tag.

In your code if you are adding tr tag each time that you press btnAddRow, your for loop is wrong:

for (i = 0; i <= 1; i++) 

Replace with:

for (i = 0; i <= $(this).find('tr').length; i++)