Tutorial

❮ Previous Next ❯

JSON HTML

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 ❯


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

Dynamic HTML Table

EXAMPLE ❯


                                <select id="myselect" onchange="change_myselect(this.value)"><br />
  <option value="">Choose an option:</option><br />
  <option value="customers">Customers</option><br />
  <option value="products">Products</option><br />
  <option value="suppliers">Suppliers</option><br />
</select><br />
<br />
<script><br />
function change_myselect(sel) {<br />
  const dbParam = JSON.stringify({table:sel,limit:20});<br />
  const xmlhttp = new XMLHttpRequest();<br />
  xmlhttp.onload = function() {<br />
    const myObj = JSON.parse(this.responseText);<br />
    let text = "<table border='1'>"<br />
    for (let x in myObj) {<br />
      text += "<tr><td>" + myObj[x].name + "</td></tr>";<br />
    }<br />
    text += "</table>"<br />
    document.getElementById("demo").innerHTML = text;<br />
  }<br />
  xmlhttp.open("POST", "json_demo_html_table.php");<br />
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");<br />
  xmlhttp.send("x=" + dbParam);<br />
}<br />
</script>

HTML Drop Down List

Make an HTML drop down list with data received as JSON:

EXAMPLE ❯


                                const dbParam = JSON.stringify({table:"customers",limit:20});<br />
const xmlhttp = new XMLHttpRequest();<br />
xmlhttp.onload = function() {<br />
  const myObj = JSON.parse(this.responseText);<br />
  let text = "<select>"<br />
  for (let x in myObj) {<br />
    text += "<option>" + myObj[x].name;<br />
  }<br />
  text += "</select>"<br />
  document.getElementById("demo").innerHTML = text;<br />
  }<br />
}<br />
xmlhttp.open("POST", "json_demo_html_table.php", true);<br />
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");<br />
xmlhttp.send("x=" + dbParam);

❮ Previous Next ❯