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

3

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>

answered Sep 21, 2017 at 5:42

mrid

5,7886 gold badges34 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sujit Jadhav Over a year ago

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 Over a year ago

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

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related