Convert table HTML to JSON

Question

I have this:

<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>

And I need a JSON format.

{"Name":"Carlos","Age": 22}

I've tried with https://github.com/lightswitch05/table-to-json but it doesn't work for the headings in every row :(

EDIT: http://jsfiddle.net/Crw2C/773/

Probably easiest to turn it into an Object and use *JSON.stringify*. This data doesn't seem tabular, is there more to it? — RobG, Jun 17 '15 at 02:33
would you be willing to put the data into columns instead of rows? — markasoftware, Jun 17 '15 at 02:35
@Markasoftware the problem is that I receive that HTML table format — cnavarreteliz, Jun 17 '15 at 02:38
well, you really have two ways to do this: use a script to somehow change the table format, then run it through the github script, or just write your own script to do it — markasoftware, Jun 17 '15 at 02:39
Does this answer your question? [Convert a HTML table data into a JSON object in jQuery](https://stackoverflow.com/questions/2240005/convert-a-html-table-data-into-a-json-object-in-jquery) — Heretic Monkey, Jun 23 '20 at 19:01

score 8 · Answer 1 · answered Jun 17 '15 at 02:48

You can convert the table in the OP to the required format by first converting it to an Object, then using JSON.stringify to get the required string:

<table id="t0">
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>

<script>

function tableToJSON(table) {
  var obj = {};
  var row, rows = table.rows;
  for (var i=0, iLen=rows.length; i<iLen; i++) {
    row = rows[i];
    obj[row.cells[0].textContent] = row.cells[1].textContent
  }
  return JSON.stringify(obj);
}

console.log(tableToJSON(document.getElementById('t0'))); // {"Name:":"Carlos","Age:":"22"}"

</script>

However, that is an ad hoc solution, so will need some work to be adapted to a more general case. It shows the concept though.

Note that there is no guarantee that the object properties will be returned in the same order as they appear in the table, you may get {"Age:":"22","Name:":"Carlos"}.

score 6 · Accepted Answer · 2015-06-17T02:54:53.593

Assuming all you need is to get the first/second cells of each row as key/value pairs, you can use .reduce() to iterate of the rows and just grab the text content of .cells[0] and .cells[1] to use as each key/value pair:

var t = document.querySelector("table");

var j = [].reduce.call(t.rows, function(res, row) {
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent;
    return res
}, {});

document.querySelector("pre").textContent = JSON.stringify(j, null, 2);

<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>
<pre></pre>

The Array.prototype.reduce method takes a collection and uses an accumulator to reduce it down to whatever state you want. Here we just reduce it to an object, so we pass one in after the callback.

For every row, we use the first cell's content as the object key, and the second cell's content as the value. We then return the object from the callback so that it's given back to us in the next iteration.

Finally, .reduce() returns the last thing we returned (which of course is the object we started with), and that's your result.

I'm always nervous about passing host objects to built–in methods as *this*. It **should** be ok, but IE8 would throw an error (irrelevant here as *reduce* would require a polyfill anyway). There may be other browsers out there that will do the same. — RobG, Jun 17 '15 at 02:56
@RobG: It's a worthy point to consider. As you said, IE8 doesn't support `.reduce()` and a polyfill won't have any issues with it. As for other browsers, (if they exist) they would fall in that range of support that not too many people really care about. But your answer is a good way too (and faster) so +1. Also for using the `.rows` and `.cells` that few people seem to use. — , Jun 17 '15 at 03:01

score 2 · Answer 3 · answered Nov 05 '16 at 17:57

2

var t = document.querySelector("table");

var j = [].reduce.call(t.rows, function(res, row) {
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent;
    return res
}, {});

document.querySelector("pre").textContent = JSON.stringify(j);

<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>
<pre></pre>

answered Nov 05 '16 at 17:57

user3544404

21
1

Perfect solution – Bhart Supriya Mar 30 '21 at 17:27

sfletche · Answer 4 · 2015-06-17T02:55:07.870

-1

The Table-to-JSON library that you are using is expecting a different format in your table.

It is expecting a table with all of your headers in the first row, followed by the data in subsequent rows.

In other words, it's expecting your table to be structured like this

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>        
    <tr>
        <td>Carlos</td>
        <td>22</td>
    </tr>
</table>

Here's a forked version of your JSFiddle in which this is working.

edited Jun 17 '15 at 02:55

answered Jun 17 '15 at 02:50

sfletche

47,248
30
103
119

He said in the comments that he can't do this, he is getting the table from another source – markasoftware Jun 17 '15 at 02:51

Convert table HTML to JSON

4 Answers4