Hướng dẫn dùng jsontotable JavaScript

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

const dbParam = JSON.stringify[{table:"customers",limit:20}];
const xmlhttp = new XMLHttpRequest[];
xmlhttp.onload = function[] {
  myObj = JSON.parse[this.responseText];
  let text = "

"
  for [let x in myObj] {
    text += "";
  }
  text += "

" + myObj[x].name + "

"
  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];

Try it Yourself »

Dynamic HTML Table

Make the HTML table based on the value of a drop down menu:

Example

  Choose an option:
  Customers
  Products
  Suppliers

function change_myselect[sel] {
  const dbParam = JSON.stringify[{table:sel,limit:20}];
  const xmlhttp = new XMLHttpRequest[];
  xmlhttp.onload = function[] {
    const myObj = JSON.parse[this.responseText];
    let text = "

"
    for [let x in myObj] {
      text += "";
    }
    text += "

" + myObj[x].name + "

"
    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];
}

Try it Yourself »

HTML Drop Down List

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

Example

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

Try it Yourself »