JSON HTML

Example

<!DOCTYPE html>
<html>
<body>

<h2>Make a table based on JSON data.</h2>

<p id=”demo”></p>

<script>
var obj, dbParam, xmlhttp, myObj, x, txt = “”;
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 += “<table border=’1′>”
for (x in myObj) {
txt += “<tr><td>” + myObj[x].name + “</td></tr>”;
}
txt += “</table>”
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);
</script>

</body>
</html>

Output

Make a table based on JSON data.

Example

<!DOCTYPE html>
<html>
<body>

<h2>Make a table based on the value of a drop down menu.</h2>

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

<p id=”demo”></p>

<script>
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 += “<table border=’1′>”
for (x in myObj) {
txt += “<tr><td>” + myObj[x].name + “</td></tr>”;
}
txt += “</table>”
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);
}
</script>

</body>
</html>

Output

Make a table based on the value of a drop down menu.

Updated: February 13, 2019 — 8:40 am
Java Script © 2019