Convert HTML Table to Json file

Question

Is it possible to convert a HTML table to json like this:

Name Gender Age

John M 18

Mike M 19

Json:

     {"Values" : {

    "1" : {
                "name": "John",
                "Gender": "M",
                "Age": "18"
            },

    "2": {
                "name": "Mike",
                "Gender": "M",
                "Age": "19"
            },
}}

I already have this code:

    (function() {
    var jsonArr = [];
    var obj = {};
    var thNum = document.getElementsByTagName('th').length;
    var arrLength = document.getElementsByTagName('td').length;

    for(i = 0; i<arrLength;i++){
        if(i%thNum==0){
            obj = {};
        }
        var head = document.getElementsByTagName('th')[i%thNum].innerHTML;
        var content = document.getElementsByTagName('td')[i].innerHTML;
        obj[head] = content;
        if(i%thNum==0){
            jsonArr.push(obj);
        }   
    }           
    document.write("<br>"+JSON.stringify(jsonArr));
})();

The script convert this:

    <!DOCTYPE html>
<TABLE border="3" rules="all" bgcolor="#E7E7E7" cellpadding="1" cellspacing="1">
<TR>
<TH align=center><font size="3" face="Arial">Date</font></TH>
<TH align=center><font size="3" face="Arial"><B>Teacher</B></font></TH>
<TH align=center><font size="3" face="Arial">?</font></TH>
<TH align=center><font size="3" face="Arial">Hour</font></TH>
<TH align=center><font size="3" face="Arial">Subject</font></TH>
<TH align=center><font size="3" face="Arial">Class</font></TH>
<TH align=center><font size="3" face="Arial">Room</font></TH>
<TH align=center><font size="3" face="Arial">(Teacher)</font></TH>
<TH align=center><font size="3" face="Arial">(Room)</font></TH>
<TH align=center><font size="3" face="Arial">XYY</font></TH>
<TH align=center><font size="3" face="Arial"><B>Information</B></font></TH>
<TH align=center><font size="3" face="Arial">(Le.) nach</font></TH>
</TR>
<TR><TD align=center><font size="3" face="Arial">24.9.</font></TD>
<TD align=center><font size="3" face="Arial"><B><strike>Dohe</strike></B></font></TD>
<TD align=center><font size="3" face="Arial">Free</font></TD>
<TD align=center><font size="3" face="Arial">1</font></TD>
<TD align=center><font size="3" face="Arial"><strike>Math</strike></font> </TD>
<TD align=center><font size="3" face="Arial">(9)</font> </TD>
<TD align=center><font size="3" face="Arial">---</font> </TD>
<TD align=center><font size="3" face="Arial"><strike>Dohe</strike></font></TD>
<TD align=center><font size="3" face="Arial">A001</font></TD>
<TD align=center>&nbsp;</TD>
<TD align=center>&nbsp;</TD>
<TD align=center><font size="3" face="Arial">Free.</font></TD>
</TR>
</TABLE>
<script>
(function() {
    var jsonArr = [];
    var obj = {};
    var thNum = document.getElementsByTagName('th').length;
    var arrLength = document.getElementsByTagName('td').length;

    for(i = 0; i < arrLength; i++){
        if(i%thNum === 0){
            obj = {};
        }
        var head = document.getElementsByTagName('th')[i%thNum].innerHTML;
        var content = document.getElementsByTagName('td')[i].innerHTML;
        obj[head] = content;
        if(i%thNum === 0){
            jsonArr.push(obj);
        }   
    }           
    document.write("<br>"+JSON.stringify(jsonArr));
})();
</script>
</body>
</html>

to this:

[{"Date":"24.9.","Teacher":"Dohe","?":"Free","Hour":"1","Subject":"Math ","Class":"(9) ","Room":"--- ","(Teacher)":"Dohe","(Room)":"A001","XYY":" ","Information":" ","(Le.) nach":"Free."}]

But I need the "Values" tag before and the "1", "2", wich should be created automatically by row. And at least ist it possible to write this into a new .json file like data.json?

provide a sample table as input and sample output of your code — shafeen, Oct 05 '15 at 14:27

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

If you want to represent the array of rows as an object, change jsonArr.push(obj) to jsonObj[++rowIx] = obj, where jsonObj has previously been initialized to {}, and rowIx is a counter that has been initialized to 0 (probably simpler than doing math on i).

The expected output you posted is not valid JSON, so I'm assuming that it's supposed to be wrapped by another set of braces:

document.write("<br>"+JSON.stringify({"Values": jsonObj}));

As for saving to a file, this is tricky to do in a portable manner. There are several other answers that address this, including the following:

edited May 23 '17 at 12:14

Community

1
1

answered Oct 05 '15 at 14:53

SloopJon

283
1
10

`` like this ? It dosn´t work ... – Marius Schönefeld Oct 05 '15 at 15:05
You aren't initializing or incrementing the counter (`rowIx`). – SloopJon Oct 05 '15 at 15:28
now I added `var rowIx = {};` but now it just show me one row and [object Object] instead 1 or so. It also shows the last row and not the first. – Marius Schönefeld Oct 05 '15 at 15:42
`rowIx` is a counter, a number that counts 1, 2, ...; I'll update the answer to make this more clear. – SloopJon Oct 05 '15 at 15:44
Thank you ! Now it works exactly how i need it. One last question: can I save this json into a file on the server e.g. data.json? without any work from the user, that views the site ? – Marius Schönefeld Oct 05 '15 at 16:21
If you want to download without user interaction, you might look at this answer: http://stackoverflow.com/questions/156686/how-to-start-automatic-download-of-a-file-in-internet-explorer. If that doesn't work for you, I suggest that you post a new question with the specific behavior you're looking for. – SloopJon Oct 05 '15 at 17:04

Convert HTML Table to Json file

1 Answers1