JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JSON HTML
JSON can be translated into JavaScript.
JavaScript can be used to make HTML on your web pages.
HTML Table
Create an HTML table with data received as JSON:
<!DOCTYPE html>
<html>
<body>
<h2>Make a table based on JSON data.</h2>
<p id=”demo”></p>
<script>
const dbParam = JSON.stringify({table:”customers”,limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
let text = “<table border=’1′>”
for (let x in myObj) {
text += “<tr><td>” + myObj[x].name + “</td></tr>”;
}
text += “</table>”
document.getElementById(“demo”).innerHTML = text;
}
xmlhttp.open(“POST”, “json_demo_html_table.php”);
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(“x=” + dbParam);
</script>
</body>
</html>
Output
Make a table based on JSON data.
Alfreds Futterkiste |
Centro comercial Moctezuma |
Ernst Handel |
Island Trading |
Laughing Bacchus Winecellars |
Magazzini Alimentari Riuniti |
HTML Drop Down List
Create an HTML drop-down list with data received as JSON:
Example
<!DOCTYPE html>
<html>
<body><h2>Make a drop down list based on JSON data.</h2>
<p id=”demo”></p>
<script>
const dbParam = JSON.stringify({table:”customers”,limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
let text = “<select>”
for (let x in myObj) {
text += “<option>” + myObj[x].name + “</option>”;
}
text += “</select>”
document.getElementById(“demo”).innerHTML = text;
}
xmlhttp.open(“POST”, “json_demo_html_table.php”);
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(“x=” + dbParam);
</script>
</body>
</html>
Output