create a json array from html table

Question

i have C++ program exporting log files as HTML table and I wanted to know if there is any way that i can parse that 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 a 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 given to it, with any possible row or column count(first row is always a header).

chartData is a normal JavaScript array, not JSON (something must be wrong today, so many people confusing this). — Felix Kling
– Felix Kling, Commented May 6, 2011 at 22:26
Interesting challenge to do without jQuery though... accepted! — mVChr
– mVChr, Commented May 6, 2011 at 22:32

mVChr · Accepted Answer · 2011-05-06 22:51:36Z

5

Here's 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 you would invoke like:

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

See working example →

answered May 6, 2011 at 22:51

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Schwarz Software Over a year ago

Nested tables are insterted as html tables, rather than JSON Objects

Felix Kling · Accepted Answer · 2011-05-06 22:53:35Z

4

Something like this, assuming the first row is always the header (could certainly be changed 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;
}

Usage is:

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 into the right data type.

DEMO

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

edited May 6, 2011 at 22:53

answered May 6, 2011 at 22:42

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

2 Comments

Jean-Philippe Martin Over a year ago

I had to change this line : "row_data[header[j]] = format(i, j, cell.textContent || cell.innerText)" to : "row_data[header[j]] = format(cell.textContent || cell.innerText)" to make it work.

Felix Kling Over a year ago

@Jean-Philippe: How many parameters does your format function accept? It must be three if you wanted to use the code as is.

Edgar Villegas Alvarado · Accepted Answer · 2011-05-06 22:45:18Z

1

You could do it 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>

Cheers.

answered May 6, 2011 at 22:45

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Comments

lightswitch05 · Accepted Answer · 2013-07-05 19:23:08Z

1

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

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 of it in action using your data:

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

edited Jul 5, 2013 at 19:23

answered May 8, 2013 at 19:48

lightswitch05

9,4987 gold badges54 silver badges75 bronze badges

Comments

Jacob · Accepted Answer · 2011-05-06 22:56:29Z

0

Since that table format looks like well-formed XML, I'd use XSLT to make the conversion; your C++ program could then just invoke an XSLT engine.

answered May 6, 2011 at 22:56

Jacob

79k24 gold badges159 silver badges245 bronze badges

Collectives™ on Stack Overflow

create a json array from html table

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related