CODEWITHSUNDEEP
javascriptjqueryjsonhtml-table
FreeZe
FreeZe

Reputation: 33

Convert a table HTML String to JSON

I'm using this table to JSON library which parses an HTML Table to JSON from its ID (#testtable in this example):

var table = $('#testtable').tableToJSON();
alert(JSON.stringify(table));

But I want to parse the Table from a String. Like this:

var table = $('<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>').tableToJSON();

How could I do that?

Upvotes: 1

Views: 2296

Answers (2)

blex
blex

Reputation: 25634

The plugin has the option to ignoreHiddenRows. Simply set it to false:

var table = $('<table>...</table>').tableToJSON({ignoreHiddenRows: false});

Demo:

var table = $('<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>').tableToJSON({ignoreHiddenRows: false});

alert(JSON.stringify(table));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/lightswitch05/table-to-json/master/src/jquery.tabletojson.js"></script>

Upvotes: 2

charlietfl
charlietfl

Reputation: 171679

It seems the plugin wants the table to be both in the DOM and visible (I tried it in a hidden container).

You can create an offscreen container to append to and then run plugin:

<div id="hidden-div" style="position:absolute; top:-999em; left:-999em"></div>

JS

$(function() {
  var $table = $('<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>')
  $('#hidden-div').append($table);
  var table = $table.tableToJSON();
  console.log(table);
});

Then remove the offscreen element:

$('#hidden-div').remove()

DEMO

Upvotes: 0

Related Questions