CODEWITHSUNDEEP
jqueryjsondatatables
Karthikeyan
Karthikeyan

Reputation: 319

convert jquery datatable data as json

I am using jquery data table. I have a table like below,

<table id="employees">
  <thead>
     <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
   <tbody>
      <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>[email protected]</td>
           <td>1234</td>
       </tr>
       <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>[email protected]</td>
           <td>1234</td>
       </tr>
     </tbody>
</table>

I am converting the table into jquery datatable as $('#employees').DataTable()

I want to convert my jquery datatable as json format. Please help me to convert this as 

[{"Id":"1", "Name":"Karthik","Email":"[email protected]","Phone":"1234"}]

Upvotes: 5

Views: 21656

Answers (4)

Andi AR
Andi AR

Reputation: 2918

Try using DataTable rows function 

 $('#YourDataTableID').DataTable().rows( { search: 'applied' } ).data().toArray();

Upvotes: 11

Mohamad Chami
Mohamad Chami

Reputation: 1234

var employees = convertTableToArrayObject();
alert(JSON.stringify(employees));



function convertTableToArrayObject() {

    var employeeObjects = [];
    var table = $('#employees').DataTable();
    var data = table.rows().data();

    for (var i = 0; i < data.length; i++) {
        employeeObjects.push(data[i]);
    }

    return employeeObjects;
}


  • function convertTableToArrayObject: loop on each row of data table, and add to array objects
  • JSON.stringify(employees): convert the array objects to json

Upvotes: 5

Parth Trivedi
Parth Trivedi

Reputation: 3832

Try this 

$(document).ready(function(){

   // Let's put this in the object like you want and convert to JSON (Note: jQuery will also do  this for you on the Ajax request)
   alert(JSON.stringify(tableToJSON($("#employees"))));
});


function tableToJSON(tblObj){  
   var data = [];
   var $headers = $(tblObj).find("th");
   var $rows = $(tblObj).find("tbody tr").each(function(index) {
   $cells = $(this).find("td");
   data[index] = {};
   $cells.each(function(cellIndex) {
     data[index][$($headers[cellIndex]).html()] = $(this).html();
   });    
});
  return data;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="employees">
  <thead>
     <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
   <tbody>
      <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>[email protected]</td>
           <td>1234</td>
       </tr>
       <tr>
           <td>2</td>
           <td>Karthik</td>
           <td>[email protected]</td>
           <td>4567</td>
       </tr>
     </tbody>
</table>

Upvotes: 10

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167220

First thing you need to get the column values:

var heads = [];
$("thead").find("th").each(function () {
  heads.push($(this).text().trim());
});

This will give you:

["Id", "Name", "Email", "Phone"]

Using this we can loop in each row and get the values:

var rows = [];
$("tbody tr").each(function () {
  cur = {};
  $(this).find("td").each(function(i, v) {
    cur[heads[i]] = $(this).text().trim();
  });
  rows.push(cur);
  cur = {};
});

So finally you would have:

var heads = [];
$("thead").find("th").each(function () {
  heads.push($(this).text().trim());
});
var rows = [];
$("tbody tr").each(function () {
  cur = {};
  $(this).find("td").each(function(i, v) {
    cur[heads[i]] = $(this).text().trim();
  });
  rows.push(cur);
  cur = {};
});
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<table id="employees">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Karthik</td>
      <td>[email protected]</td>
      <td>1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Praveen</td>
      <td>[email protected]</td>
      <td>5678</td>
    </tr>
  </tbody>
</table>

Preview:

Output: http://jsbin.com/kuhuzivadi/edit?html,js,console,output

Upvotes: 3

Related Questions