How to serialize table row in json object

Question

How to serialize a table into a json array so that each element of the array contains a json object representing one row of the table:

[ { name: "variable1", valuetostore: "ab", totaltype: "Lowest" }, { name: "variable2", valuetostore: "cd", totaltype: "Highest" } ] 

I tried the code below, but this creates objects with name and value properties, and there are more elements in the array than in the rows of the table.

It also serializes the first line, which is hidden. This is a template string to add a string and should not contain the result.

 $(function() { $("#btnShow").on("click", function() { console.log($("#myForm").serializeArray()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <form id="myForm"> <table class="table table-condensed table-striped" id="reportVariablesTable"> <thead> <tr> <th>Name</th> <th>Value</th> <th>Calculate</th> </tr> </thead> <tbody> <!-- table contains one hidden rows which should not --> <tr style='display:none'> <td> <input type="text" name="name"> </td> <td> <textarea name="valuetostore"></textarea> </td> <td> <select class="totaltype-select" id="totaltype" name="totaltype"> <option value=""></option> <option value="Sum">Summary</option> <option value="Lowest">Smallest</option> <option value="Highest">Biggers</option> </select> </td> </tr> <!-- other are data rows which should sent --> <tr> <td> <input type="text" name="name" value="variable1"> </td> <td> <textarea name="valuetostore">ab</textarea> </td> <td> <select class="totaltype-select" id="totaltype" name="totaltype"> <option value=""></option> <option value="Sum">Summary</option> <option value="Lowest" selected>Smallest</option> <option value="Highest">Biggers</option> </select> </td> </tr> <tr> <td> <input type="text" name="name" value="variable2"> </td> <td> <textarea name="valuetostore">cd</textarea> </td> <td> <select class="totaltype-select" id="totaltype" name="totaltype"> <option value=""></option> <option value="Sum">Summary</option> <option value="Lowest" >Smallest</option> <option value="Highest" selected>Biggers</option> </select> </td> </tr> </tbody> </table> <button id="btnShow" type="button"> Show </button> </form> </div> </div> </div> </div> 

Answer 1

You can use the nth-child selector with n+2 to select only tr> = 2:

 #myForm tbody tr:nth-child(n+2) 

However, the result will not be an array of objects, where each object is a row object. The result is an array of objects, where each select / input / textarea element is an object in itself.

You can use the each() function on trs to view all of them to get the expected result.

Here is an example for both options:

 $(function() { $("#btnShow1").on("click", function() { console.log($("#myForm tbody tr:nth-child(n+2) textarea,#myForm tbody tr:nth-child(n+2) input,#myForm tbody tr:nth-child(n+2) select").serializeArray()); }); $("#btnShow2").on("click", function() { var ar = []; $("#myForm tbody tr:nth-child(n+2)").each(function() { rowData = $(this).find('input, select, textarea').serializeArray(); var rowAr = {}; $.each(rowData, function(e, v) { rowAr[v['name']] = v['value']; }); ar.push(rowAr); }); console.log(ar) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <form id="myForm"> <table class="table table-condensed table-striped" id="reportVariablesTable"> <thead> <tr> <th>Name</th> <th>Value</th> <th>Calculate</th> </tr> </thead> <tbody> <!-- table contains one hidden rows which should not --> <tr style='display:none'> <td> <input type="text" name="name"> </td> <td> <textarea name="valuetostore"></textarea> </td> <td> <select class="totaltype-select" id="totaltype" name="totaltype"> <option value=""></option> <option value="Sum">Summary</option> <option value="Lowest">Smallest</option> <option value="Highest">Biggers</option> </select> </td> </tr> <!-- other are data rows which should sent --> <tr> <td> <input type="text" name="name" value="variable1"> </td> <td> <textarea name="valuetostore">ab</textarea> </td> <td> <select class="totaltype-select" id="totaltype" name="totaltype"> <option value=""></option> <option value="Sum">Summary</option> <option value="Lowest" selected>Smallest</option> <option value="Highest">Biggers</option> </select> </td> </tr> <tr> <td> <input type="text" name="name" value="variable2"> </td> <td> <textarea name="valuetostore">cd</textarea> </td> <td> <select class="totaltype-select" id="totaltype" name="totaltype"> <option value=""></option> <option value="Sum">Summary</option> <option value="Lowest" >Smallest</option> <option value="Highest" selected>Biggers</option> </select> </td> </tr> </tbody> </table> <button id="btnShow1" type="button"> Options #1 </button><br /> <button id="btnShow2" type="button"> Options #2 </button> </form> </div> </div> </div> </div>