Get JSON key-value pairs by using Jquery SerializeArray()

Question

How to serialize a form

What I want

[{"itemId[0]":"143","quantity[0]":"0"},
{"itemId[1]":"142","quantity[1]":"0"}]

Returned output

[{"name":"itemId[0]","value":"143"},{"name":"quantity[0]","value":"0"},
{"name":"itemId[1]","value":"142"},{"name":"quantity[1]","value":"0"}]

I knew the question quite similar like jQuery serializeArray() key value pairs, but I still didn't manage to solve it.

My code so far

javascript

....
for (var i = 0; i < checkboxes.length; i++) {

   var p1 = '<tr><td><input type="hidden" name="itemId[' + i + ']" value="' + cid + '" />';
   var p2 = '</td><td><input type="number" name="quantity[' + i + ']" value="0"/>';
   $('#tbody').append(p1 + p2 +'</td></tr>');
}


$('#getlist').click( function() {
   var formData = JSON.stringify($("#sendform").serializeArray());

alert(formData);

}

form

<form action="" method="POST" id="sendform">
   <table class="table table-md tabledata table-bordered" id="user_data">
   <thead>
     <tr>
       <th>Item id</th>
       <th>Quantity</th>
     </tr>
   </thead>
   <tbody id="tbody">
   ....


  <button class="btn btn-success" id="getlist">Submit</button>
</form>

Already tried

var complex = $("#sendform").serialize(); // name1=value1&name2=value2
var json = toSimpleJson(complex); // {"name1":"value1", "name2":"value2"}

function toSimpleJson(serializedData) {
   var ar1 = serializedData.split("&");
   var json = "{";
   for (var i = 0; i<ar1.length; i++) {
      var ar2 = ar1[i].split("=");
      json += i > 0 ? ", " : "";
      json += "\"" + ar2[0] + "\" : ";
      json += "\"" + (ar2.length < 2 ? "" : ar2[1]) + "\"";
   }
   json += "}";
   return json;
}

Return

{"itemName%5B0%5D":"143","quantity%5B0%5D":"0","itemName%5B1%5D":"142", "quantity%5B1%5D":"0","itemName%5B2%5D":"141","quantity%5B2%5D":"0"}

score 1 · Accepted Answer · answered Oct 03 '19 at 10:52

Loop over the <tr> elements and build up the array like so:

$(function() {
    var serialized = [];

    $("tr").each(function() {
        var itemId   = $(this).find("[name^='itemId']");
        var quantity = $(this).find("[name^='quantity']");
        
        serialized.push({
            [itemId.attr("name")]   : itemId.val(),
            [quantity.attr("name")] : quantity.val()
        })
    });

    console.log(serialized);
})

<table>
    <tbody>
        <tr>
            <td><input type="hidden" name="itemId[0]" value="143" /></td>
            <td><input type="number" name="quantity[0]" value="0" /></td>
        </tr>
        <tr>
            <td><input type="hidden" name="itemId[1]" value="142" /></td>
            <td><input type="number" name="quantity[1]" value="0" /></td>
        </tr>
    </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Get JSON key-value pairs by using Jquery SerializeArray()

My code so far

1 Answers1