Create json array from html table

Question

I have a C ++ program exporting log files as an HTML table, and I wanted to know if there is a way I can parse this table (something like this):

<table> <tr><td>id</td><td>value1</td><td>value2</td></tr> <tr><td>0 </td><td>0 </td><td>0 </td></tr> <tr><td>0 </td><td>1.5 </td><td>2.15 </td></tr> </table> 

into a JSON array (something like this) using the Javascript function:

  var chartData = [ {id:"0",value1:"0",value2:"0"}, {id:"1",value1:"1.5",value2:"2.15"}]; 

The problem is that I want this function to work for every table provided to it, with any possible number of rows or columns (the first row is always the header).

Answer 1

Here is my implementation:

 var tableToObj = function( table ) { var trs = table.rows, trl = trs.length, i = 0, j = 0, keys = [], obj, ret = []; for (; i < trl; i++) { if (i == 0) { for (; j < trs[i].children.length; j++) { keys.push(trs[i].children[j].innerHTML); } } else { obj = {}; for (j = 0; j < trs[i].children.length; j++) { obj[keys[j]] = trs[i].children[j].innerHTML; } ret.push(obj); } } return ret; }; 

Which would you call:

 var obj = tableToObj( document.getElementsByTagName('table')[0] ); // or var obj = tableToObj( document.getElementById('myTable') ); 

See working example →

Answer 2

Something like this, assuming the first line is always the headline (you could, of course, change to make it more flexible):

 function getData(table, format) { var rows = table.tBodies[0].rows, header_row = rows[0], result = [], header = [], format = format || function(val){return val;}, i, j, cell, row, row_data; // extract header for(i = 0, l = header_row.cells.length; i < l; i++) { cell = header_row.cells[i]; header.push((cell.textContent || cell.innerText)); } // extract values for(i = 1, l = rows.length; i < l; i++) { row = rows[i]; row_data = {}; for(j = 0, l = row.cells.length; j < l; j++) { cell = row.cells[j]; row_data[header[j]] = format(i, j, cell.textContent || cell.innerText); } result.push(row_data); } return result; } 

Using:

 var chartData = getData(referenceToTable, function(rowIndex, colIndex, value) { return +value; // shortcut to format text to a number }); 

By passing a format function, you can format the values ​​of each cell to the desired data type.

Demo

It works under the assumption that there is only one tbody element. You must adapt it to your needs.

Answer 3

You can do this using the jquery framework. I

 <sript src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ var chartData = []; $("table tr").each(function(i){ if(i==0) return; var id = $.trim($(this).find("td").eq(0).html()); var value1 = $.trim($(this).find("td").eq(1).html()); var value2 = $.trim($(this).find("td").eq(2).html()); chartData.push({id: id, value1: value1, value2: value2}); }); //now you have the chartData array filled }); </script> 

Greetings.

Answer 4

I need the same thing except with the ability to ignore columns, override values ​​and not confuse nested tables. I ended up writing a jQuery table-to-json plugin:

https://github.com/lightswitch05/table-to-json

All you have to do is select your table using jQuery and call the plugin:

 var table = $('#example-table').tableToJSON(); 

Here is a demo in action using your data:

http://jsfiddle.net/dGPks/199/

Answer 5

Since the table format looks like well-formed XML, I would use XSLT for conversion; your C ++ program could just call the XSLT engine.