How to convert an HTML Table into a JSON Object

Table-to-JSON

A jQuery plugin that converts an HTML Table into a javascript object. Great for working with user-editable tables or accessing output from 3rd party tools.:

  1. JavaScript files needed:

    Insert these scripts into <head> tag:

    <head>
       //download this js from "http://jquery.com/download/"
       <script src="js/jquery-1.9.1.min.js"></script>
    
       //download this js from "https://github.com/lightswitch05/table-to-json/blob/master/lib/jquery.tabletojson.min.js"
       <script src="js/jquery.tabletojson.min.js"></script>
    </head>
  2. Basic Usage JavaScript code:

    <head>
       //Insert this script into <head> tag:
       <script>
          //Basic Usage
          var table = $('#example-table').tableToJSON();
       </script>
    </head>
  3. Advance Usage JavaScript code:
    <head>
       //Insert this script into <head> tag
       <script>
          //Ignore first column (name)
          var table = $('#example-table').tableToJSON({
            ignoreColumns: [0]
          });
       </script>
    </head>
  4. Example:
    First Name Last Name Points
    Jill Smith 50
    Eve Jackson 94
    John Doe 80
    Adam Johnson 67
    HMTL
    <table id='example-table'>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th data-override="Score">Points</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td data-override="disqualified">50</td></tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td></tr>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>80</td></tr>
        <tr>
          <td>Adam</td>
          <td>Johnson</td>
          <td>67</td></tr>
      </tbody>
    </table>
  5. Result of the example:

    <script type="text/javascript">
      // Basic Usage
      var table = $('#example-table').tableToJSON();
      // table == [{"First Name"=>"Jill", "Last Name"=>"Smith", "Score"=>"disqualified"},
      //           {"First Name"=>"Eve", "Last Name"=>"Jackson", "Score"=>"94"},
      //           {"First Name"=>"John", "Last Name"=>"Doe", "Score"=>"80"},
      //           {"First Name"=>"Adam", "Last Name"=>"Johnson", "Score"=>"67"}]
    
      // Ignore first column (name)
      var table = $('#example-table').tableToJSON({
            ignoreColumns: [0]
      });
      // table == [{"Last Name"=>"Smith", "Score"=>"disqualified"},
      //           {"Last Name"=>"Jackson", "Score"=>"94"},
      //           {"Last Name"=>"Doe", "Score"=>"80"},
      //           {"Last Name"=>"Johnson", "Score"=>"67"}]
    </script>

Reference link: http://lightswitch05.github.io/table-to-json/

2 thoughts on “How to convert an HTML Table into a JSON Object

  1. Hi, For Integer , it should reflect the values without codes, is that possible, If yes ,plz help.
    For Scores it should display as integers. Example given below
    [{“First Name”:”Jill”,”Last Name”:”Smith”,”Score”: disqualified},
    {“First Name”:”Eve”,”Last Name”:”Jackson”,”Score”: 94},
    {“First Name”:”John”,”Last Name”:”Doe”,”Score”: 80},
    {“First Name”:”Adam”,”Last Name”:”Johnson”,”Score”: 67}]

  2. Hi Savitha,

    Yes, It is possible. For Scores you should convert to Integer like this:

    $(‘#convert-table’).click( function() {
    var table = $(‘#example-table’).tableToJSON(); // Convert the table into a javascript object

    var obj = JSON.parse(JSON.stringify(table), function(key, value) {
    return (typeof key === “Score” || isNaN(value)) ? value : Number(value);
    });

    console.log(obj);

    });

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s