Convert html table to Json in Jquery

Question

I have a table with each tr having the class. I would want to convert it to Json so that it can used at server side. Table content is as below:

<table class="tableContent"> <thead> <tr class="header"> <th class="col1">RoleName</th> <th class="col2">ReadOnly</th> <th class="col3">Modify</th> <th class="col4">Approve</th> </tr> </thead> <tbody> <tr class="1"> <td>RoleA</td> <td><input type="checkbox" class="readOnly"></td> <td><input type="checkbox" class="modify" checked></td> <td><input type="checkbox" class="approve"></td> </tr> <tr class="1"> <td>RoleB</td> <td><input type="checkbox" class="readOnly"></td> <td><input type="checkbox" class="modify" checked></td> <td><input type="checkbox" class="approve"></td> </tr> <tr class="2"> <td>RoleA</td> <td><input type="checkbox" class="readOnly" checked></td> <td><input type="checkbox" class="modify" checked></td> <td><input type="checkbox" class="approve"></td> </tr> <tr class="2"> <td>RoleB</td> <td><input type="checkbox" class="readOnly" checked></td> <td><input type="checkbox" class="modify" checked></td> <td><input type="checkbox" class="approve" checked></td> </tr> </tbody> </table>

I would like the Json to be in below format:

[{"id":1, "roles":[ { "name": "RoleA", "readOnly": false, "modify": true, "approve": false }, { "name": "RoleB", "readOnly": false, "modify": true, "approve": true } ]}, {"id":2, "roles":[ { "name": "RoleA", "readOnly": true, "modify": true, "approve": false }, { "name": "RoleB", "readOnly": true, "modify": true, "approve": true } ]}]

Here the class attribute value is the field id in the json and the roles can be multiple for users.

Any guidance to help solve is greatly appreciated!

Update: In order to create list like above, there is an extra column added and the Json is then created in same exact format. Working JS Fiddle : https://jsfiddle.net/SujitJ/cjk6vu3n/8/

Possible duplicate of how-to-convert-the-following-table-to-json-with-javascript. — Shadow Fiend
– Shadow Fiend, Commented Sep 21, 2017 at 5:39

mrid · Accepted Answer · 2017-09-21 05:42:55Z

var myRows = []; var $headers = $("th"); var $rows = $("tbody tr").each(function(index) { $cells = $(this).find("td"); myRows[index] = {}; $cells.each(function(cellIndex) { myRows[index][$($headers[cellIndex]).html()] = $(this).html(); }); }); var myObj = {}; myObj.myrows = myRows; alert(JSON.stringify(myObj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="tableContent"> <thead> <tr class="header"> <th class="col1">RoleName</th> <th class="col2">ReadOnly</th> <th class="col3">Modify</th> <th class="col4">Approve</th> </tr> </thead> <tbody> <tr class="1"> <td>RoleA</td> <td><input type="checkbox" class="readOnly"></td> <td><input type="checkbox" class="modify" checked></td> <td><input type="checkbox" class="approve"></td> </tr> <tr class="1"> <td>RoleB</td> <td><input type="checkbox" class="readOnly"></td> <td><input type="checkbox" class="modify" checked></td> <td><input type="checkbox" class="approve"></td> </tr> <tr class="2"> <td>RoleA</td> <td><input type="checkbox" class="readOnly" checked></td> <td><input type="checkbox" class="modify" checked></td> <td><input type="checkbox" class="approve"></td> </tr> <tr class="2"> <td>RoleB</td> <td><input type="checkbox" class="readOnly" checked></td> <td><input type="checkbox" class="modify" checked></td> <td><input type="checkbox" class="approve" checked></td> </tr> </tbody> </table>

The above does not give the json in required format, if you check the output, there is inclusion of input type also, however i would like to exclude it, rather check if its checked or not and then set the value as true or false.
I have updated you code and taken input from the checkbox. JS Fiddle: jsfiddle.net/SujitJ/cjk6vu3n

Collectives™ on Stack Overflow

Convert html table to Json in Jquery

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related