Table To JSON

jQuery plugin to serialize HTML tables into javascript objects.

Links

• Demo: https://lightswitch05.github.io/table-to-json/
• Plunker Template: https://plnkr.co/edit/iQFtcEEZkvsMJ2UqcrlW?p=preview

CDN

It is recommended to pull this tool into your project directly. But if you insist to use a CDN, here is one:

<script src="https://cdn.jsdelivr.net/npm/table-to-json@1.0.0/lib/jquery.tabletojson.min.js" integrity="sha256-H8xrCe0tZFi/C2CgxkmiGksqVaxhW0PFcUKZJZo1yNU=" crossorigin="anonymous"></script>

Features

• Automatically finds column headings
  • Override found column headings by using data-override="overridden column name"
  • Always uses first row as column headings regardless of th and td tags
• Override cell values column names by using data-override="new value"
• Ignorable columns
• Not confused by nested tables
• Works with rowspan and colspan

Options

• ignoreColumns
  • Array of column indexes to ignore.
  • Default: []
• onlyColumns
  • Array of column indexes to include, all other columns are ignored. This takes presidence over ignoreColumns when provided.
  • Default: null - all columns
• ignoreHiddenRows
  • Boolean if hidden rows should be ignored or not.
  • Default: true
• ignoreEmptyRows
  • Boolean if empty rows should be ignored or not.
  • Default: false
• headings
  • Array of table headings to use. When supplied, treats entire table as values including the first <tr>
  • Default: null
• allowHTML
  • Boolean if HTML tags in table cells should be preserved
  • Default: false
• includeRowId
  • Either a boolean or a string. If true, the the id attribute on the table's <tr> elements will be included in the JSON as rowId. To override the name rowId, supply a string of the name you would like to use.
  • Default: false
• textDataOverride
  • String containing data-attribute which contains data which overrides the text contained within the table cell
  • Default: 'data-override'
• textExtractor
  • alias of extractor

• extractor

  • Function : function that is used on all tbody cells to extract text from the cells; a value in data-override will prevent this function from being called. Example:

  $('table').tableToJSON({
    extractor : function(cellIndex, $cell) {
      // get text from the span inside table cells;
      // if empty or non-existant, get the cell text
      return $cell.find('span').text() || $cell.text();
    }
  });

  $('table').tableToJSON({
    extractor : function(cellIndex, $cell) {
      return {
        name: $cell.find('span').text(),
        avatar: $cell.find('img').attr('src')
      };
    }
  });

  • Object : object containing a zero-based cell index (this does not take colspan cells into account!) of the table; a value in data-override will prevent this function from being called. Example:

  $('table').tableToJSON({
    extractor : {
      0 : function(cellIndex, $cell) {
        return $cell.find('em').text();
      },
      1 : function(cellIndex, $cell) {
        return $cell.find('span').text();
      }
    }
  });

  • Default: null

Example

<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>

<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>

Contributing

• Install Node.js.
  • this will also the npm package manager.
• run npm install from app root directory.
  • This installs grunt and other dependencies See package.json for a full list.
• run npm install -g grunt-cli.
• run grunt to run tests and create a new build in /lib.
• Make the changes you want.
• Make tests for the changes.
• Submit a pull request, please submit to the develop branch.

Looking for a server-side solution?

Colin Tremblay is working on a PHP implementation at HTML-Table-To-JSON

Special Thanks

• imamathwiz for adding allowHTML option and various other changes.
• nenads for adding headings option.
• Mottie for adding rowspan & colspan support. Also adding the textExtractor & dataOverride feature!
• station384 for adding includeRowId support.
• dayAlone for adding ignoreEmptyRows option.
• danielapsmaior for discovering and fixing a rowspan & colspan bug.
• koshuang for adding extractor feature!
• noma4i added feature "Skip columns where headers are not present"
• cn-tools for reporting AND fixing a bug when using both ignoreEmptyRows and ignoreColumns options