JSON HTML

Toggle navigation
TUTORIAL HOME
JSON HTML
❮ Previous Next ❯
JSON can very easily be translated into JavaScript.

JavaScript can be used to make HTML in your web pages.

HTML Table
Make an HTML table with data received as JSON:

Example
obj = { “table”:”customers”, “limit”:20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += “

“
        for (x in myObj) {
            txt += “

“;
        }
        txt += “

” + myObj[x].name + “

“
        document.getElementById(“demo”).innerHTML = txt;
    }
}
xmlhttp.open(“POST”, “json_demo_db_post.php”, true);
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(“x=” + dbParam);
»
Dynamic HTML Table
Make the HTML table based on the value of a drop down menu:

Example
<select id="myselect" onchange="change_myselect(this.value)”>
    Choose an option:
    Customers</option>
    Products</option>
    Suppliers</option>

function change_myselect(sel) {
    var obj, dbParam, xmlhttp, myObj, x, txt = “”;
    obj = { “table”:sel, “limit”:20 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myObj = JSON.parse(this.responseText);
            txt += “

“
            for (x in myObj) {
                txt += “

“;
            }
            txt += “

” + myObj[x].name + “

“
            document.getElementById(“demo”).innerHTML = txt;
        }
    };
    xmlhttp.open(“POST”, “json_demo_db_post.php”, true);
    xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
    xmlhttp.send(“x=” + dbParam);
}

»
HTML Drop Down List
Make an HTML drop down list with data received as JSON:

Example
obj = { “table”:”customers”, “limit”:20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += “”
        for (x in myObj) {
            txt += “” + myObj[x].name;
        }
        txt += “”
        document.getElementById(“demo”).innerHTML = txt;
    }
}
xmlhttp.open(“POST”, “json_demo_db_post.php”, true);
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(“x=” + dbParam);
»

❮ Previous Next ❯