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](https://stackoverflow.com/questions/9927126/how-to-convert-the-following-table-to-json-with-javascript). — Shadow Fiend, Sep 21 '17 at 05:39

score 3 · Answer 1 · answered Sep 21 '17 at 05:42

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. — Sujit Jadhav, Sep 21 '17 at 06:03
I have updated you code and taken input from the checkbox. JS Fiddle: https://jsfiddle.net/SujitJ/cjk6vu3n/ — Sujit Jadhav, Sep 21 '17 at 06:22

Convert html table to Json in Jquery

1 Answers1