How to serialize table to json array so that every array element contains json object representing one table row:
[
{ name: "variable1", valuetostore: "a-b", totaltype: "Lowest" },
{ name: "variable2", valuetostore: "c-d", totaltype: "Highest" }
]
I tried code below but this produces objects with name and value properties and there are more members in array than in table rows.
It serializes also first row which is hidden. It is template row for row adding and should not apper in result.
$(function() {
$("#btnShow").on("click", function() {
console.log($("#myForm").serializeArray());
});
});<script src=".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">a-b</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">c-d</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>How to serialize table to json array so that every array element contains json object representing one table row:
[
{ name: "variable1", valuetostore: "a-b", totaltype: "Lowest" },
{ name: "variable2", valuetostore: "c-d", totaltype: "Highest" }
]
I tried code below but this produces objects with name and value properties and there are more members in array than in table rows.
It serializes also first row which is hidden. It is template row for row adding and should not apper in result.
$(function() {
$("#btnShow").on("click", function() {
console.log($("#myForm").serializeArray());
});
});<script src="https://ajax.googleapis./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">a-b</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">c-d</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>- i think this will solve your problem stackoverflow./questions/2240005/… – user6783030 Commented Oct 25, 2016 at 13:34
- Answers to this question does not show for to get valeus from input, textarea and select elements in tr. I asked about returning their values in result json objects properties – Andrus Commented Oct 25, 2016 at 13:55
2 Answers
Reset to default 4You can use the nth-child selector with n+2 to select only the tr>=2:
#myForm tbody tr:nth-child(n+2)
However the result will not be an array of objects where each object is an object of a row. The result will be an array of object where each select/input/textarea is an object by itself.
You can use each() function on the trs to go over 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./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">a-b</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">c-d</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>You can serialize any table with or without form elements using SerializeFromTable jQuery plugin. No need to wrap table by <form> tag. It's as simple as (where data-columnTitle is the key field as you want in your json/json array object):
let tabledata = $("#example1").serializeFromTable({
columnNameBy:"data-columnTitle"
});
For more options check out this link at: serializeFromTable Plugin.