jQuery : How to get JSON data of the table with custom header values

Question

jQuery: How to get JSON data of the table data with custom header values. Have one table and need to convert entire table data to the json format data. Now im trying to replace array of headers (custom headers) insted of actual table headers in the json data. I tried to replace original table heades with $headers =["ID", "ABC", "XYZ","Test"];I tried with below code,

expected output:

[{"ID":"22222","ABC":"test5","XYZ":"3000","":"abc"},{"ID":"3333","ABC":"test1","XYZ":"1000","":"erf"},{"ID":"44444","ABC":"test2","XYZ":"2000","":"sde"},{"ID":"55555","ABC":"test3","XYZ":"3000","":"fre"}]

Fiddle

 $(document).ready(function() { $("#getJsondata").click(function() { var jsonData1 = []; var matchId = 1234; var $headers = $("#firstTable").find("th:eq(0),th:eq(1),th:eq(2)"); //var $headers =["ID", "ABC", "XYZ","Test"]; var $rows = $("#firstTable").find("tbody tr").each(function(index) { const $cells = $(this).closest("tr").find("td:eq(0),td:eq(1),td:eq(2),td:eq(3)"); jsonData1[index] = {}; $cells.each(function(cellIndex) { jsonData1[index][$($headers[cellIndex]).text()] = $(this).text(); }); }); alert(JSON.stringify(jsonData1)); }); });

 td { border: 1px solid black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="multipleData" style="border:1px solid black;" id="firstTable"> <thead style="background:grey;"> <tr> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Header5</th> <th>Header6</th> </tr> </thead> <tbody> <tr style="border:1px solid black"> <td>22222</td> <td>test5</td> <td>3000</td> <td>abc</td> <td>22222</td> <td>Y</td> </tr> <tr style="border:1px solid black"> <td>3333</td> <td>test1</td> <td>1000</td> <td>erf</td> <td>22222</td> <td>Y</td> </tr> <tr style="border:1px solid black"> <td>44444</td> <td>test2</td> <td>2000</td> <td>sde</td> <td>22222</td> <td>Y</td> </tr> <tr style="border:1px solid black"> <td>55555</td> <td>test3</td> <td>3000</td> <td>fre</td> <td>22222</td> <td>Y</td> </tr> </tbody> </table> <button id="getJsondata" type="button"> GetJsonData </button>

Answer 1

This seems to do what you wanted

 const headers = ["ID", "ABC", "XYZ", "Test"]; $(function() { $("#getJsondata").on("click", function() { const data = []; $("#firstTable").find("tbody tr").each(function() { data.push({}) $(this).find("td").map(function(i) { return this.textContent; }).get() // get the array of all cell contents.slice(0, -2) // get rid of the last two.forEach((text,i) => data[data.length-1][headers[i]] = text) // add to the object }) console.log(JSON.stringify(data)); }); });

 td { border: 1px solid black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="multipleData" style="border:1px solid black;" id="firstTable"> <thead style="background:grey;"> <tr> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Header5</th> <th>Header6</th> </tr> </thead> <tbody> <tr style="border:1px solid black"> <td>22222</td> <td>test5</td> <td>3000</td> <td>abc</td> <td>22222</td> <td>Y</td> </tr> <tr style="border:1px solid black"> <td>3333</td> <td>test1</td> <td>1000</td> <td>erf</td> <td>22222</td> <td>Y</td> </tr> <tr style="border:1px solid black"> <td>44444</td> <td>test2</td> <td>2000</td> <td>sde</td> <td>22222</td> <td>Y</td> </tr> <tr style="border:1px solid black"> <td>55555</td> <td>test3</td> <td>3000</td> <td>fre</td> <td>22222</td> <td>Y</td> </tr> </tbody> </table> <button id="getJsondata" type="button"> GetJsonData </button>

Answer 2

You can get td index and depending on this get $headers value at that index and push same inside JSON Array .I have use :lt (less then) because there are only 4 header value you can remove that if you need all tds values

Demo Code :

 $(document).ready(function() { $("#getJsondata").click(function() { var jsonData1 = []; var $headers = ["ID", "ABC", "XYZ", "Test"]; $("#firstTable").find("tbody tr").each(function(index) { var values = {}; //create obj //loop through tr > td only < 4 $(this).find("td:lt(4)").each(function(index) { values[$headers[index]] = $(this).text(); //add values }) jsonData1.push(values) //push in array }); alert(JSON.stringify(jsonData1)); }); });

 td { border: 1px solid black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="multipleData" style="border:1px solid black;" id="firstTable"> <thead style="background:grey;"> <tr> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Header5</th> <th>Header6</th> </tr> </thead> <tbody> <tr style="border:1px solid black"> <td>22222</td> <td>test5</td> <td>3000</td> <td>abc</td> <td>22222</td> <td>Y</td> </tr> <tr style="border:1px solid black"> <td>3333</td> <td>test1</td> <td>1000</td> <td>erf</td> <td>22222</td> <td>Y</td> </tr> <tr style="border:1px solid black"> <td>44444</td> <td>test2</td> <td>2000</td> <td>sde</td> <td>22222</td> <td>Y</td> </tr> <tr style="border:1px solid black"> <td>55555</td> <td>test3</td> <td>3000</td> <td>fre</td> <td>22222</td> <td>Y</td> </tr> </tbody> </table> <button id="getJsondata" type="button"> GetJsonData </button>