JSON HTML

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

Make a drop down list based on JSON data.