HTML Table to JSON file via AJAX

Personally, I like using JQuery, yet if you don't know or can't insert it as a SRC, then we should assume to use JavaScript. So we will post the JSON data to our PHP via AJAX when the page is done loading. The PHP will then write this JSON into a new file on the server called subs.json and will be overwritten each time the script runs.

We will start with the JavaScript:

<script>
function collectData() {
    var jsonArr = [];
    var obj = {};
    var rowIx = 0;
    var jsonObj = {};
    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){
            jsonObj[++rowIx] = obj;
        }   
    }           
    return jsonObj;
}

function postJSONData(json){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "/subPost.php");
    xmlhttp.setRequestHeader("Content-Type", "application/application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var return_data = xmlhttp.responseText;
            alert(return_data);
        }
    }
    xmlhttp.send("values="+JSON.stringify(json));
}

postJSONData(collectData());
</script>

At this point, the page should post your JSON to a PHP page called subPost.php located at the same level as the page that is executing this JS. This PHP Will look like:

<?php
if(isset($_POST['values'])){
        $values = $_POST['values'];
        $fp = fopen('subs.json', 'w');
        fwrite($fp, $values);
        fclose($fp);
        echo "Values written to subs.json.\r\n";
} else {
        echo "No Post data received.";
}
?>

I made a working example you can see here: http://www.yrmailfrom.me/projects/testPost/ and the content of http://www.yrmailfrom.me/projects/testPost/subs.json is:

{"1":{"<font face=\"Arial\" size=\"3\">Date</font>":"<font face=\"Arial\" size=\"3\">24.9.</font>","<font face=\"Arial\" size=\"3\"><b>Teacher</b></font>":"<font face=\"Arial\" size=\"3\"><b><strike>Dohe</strike></b></font>","<font face=\"Arial\" size=\"3\">?</font>":"<font face=\"Arial\" size=\"3\">Free</font>","<font face=\"Arial\" size=\"3\">Hour</font>":"<font face=\"Arial\" size=\"3\">1</font>","<font face=\"Arial\" size=\"3\">Subject</font>":"<font face=\"Arial\" size=\"3\"><strike>Math</strike></font> ","<font face=\"Arial\" size=\"3\">Class</font>":"<font face=\"Arial\" size=\"3\">(9)</font> ","<font face=\"Arial\" size=\"3\">Room</font>":"<font face=\"Arial\" size=\"3\">---</font> ","<font face=\"Arial\" size=\"3\">(Teacher)</font>":"<font face=\"Arial\" size=\"3\"><strike>Dohe</strike></font>","<font face=\"Arial\" size=\"3\">(Room)</font>":"<font face=\"Arial\" size=\"3\">A001</font>","<font face=\"Arial\" size=\"3\">XYY</font>":"

This is not valid JSON. It seems that some data is being misunderstood. I suspect that this is due to characters in the values, like  . I see this in the posted data:

"<font face=\"Arial\" size=\"3\">XYY</font>":"
    [nbsp;","<font_face] => \"Arial\" size=\"3\">(Le.) nach</font>":"<font face=\"Arial\" size=\"3\"
>Free.</font>"}}

I was able to overcome this with another small JS function:

function nbsp2space(str) {
    return String(str).replace(/ /g, ' ');
}

Then use this function in collectData() like so:

obj[head] = nbsp2space(content);

Now when the page executes, we post the data to the PHP and it's written to the file subs.json.

You can try some thing like this:

HTML

<table>
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>1</td>
<td>Test</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Test 2</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Test 3</td>
<td>[email protected]</td>
</tr>
</table>

Javascript

   <script type="text/javascript">
        jQuery(document).ready(function(){
          data = new Array();
          columns = [];
          var row = new Array();
          $('table tr').each(function(index,tr){
              var index = index;
              if(index == 0){ // First we get column names from th.

                $(tr).find('th').each(function(thIndex,thValue){
                  columns.push($(thValue).text());
                });
              } else {
                $(tr).find('td').each(function(tdIndex,tdValue){
                  row[tdIndex] = $(tdValue).text(); // Put each td value in row
                });

                data.push(row); // now push each row in data.
                row = new Array(); // reset row after push
              }

          });
        // Send it to PHP for further work:
          $.post('json.php', { data: data, columns: columns }, function(response){
          // TODO with response
          });
        })
        </script>

json.php

$data = $_POST['data']; // Each rows values
$columns = $_POST['columns']; // Columns names

for($i = 0; $i < count($data); $i++) {

  $json[] = array(($i+1) => array_combine($columns, $data[$i]));

}

$json = json_encode($json);
// TODO with $json eg: file_put_contents();

the output you will get after json_encode() is:

{"values":[{"1":{"No":"1","Name":"Test","Email":"[email protected]"}},{"2":{"No":"2","Name":"Test 2","Email":"[email protected]"}},{"3":{"No":"3","Name":"Test 3","Email":"[email protected]"}}]}

Note jQuery must be included before running this.