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 = "
" + 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 = "
" + 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 »
View Discussion
Improve Article
Save Article
View Discussion
Improve Article
Save Article
The task is to fetch data from the given JSON file and convert data into an HTML table.
Approach: We have a JSON file containing data in the form of an array of objects. In our code, we are using jQuery to complete our task. The jQuery code uses getJSON[] method to fetch the data from the file’s location using an AJAX HTTP GET request. It takes two arguments. One is the location of the JSON file and the other is the function containing the JSON data. The each[] function is used to iterate through all the objects in the array. It also takes two arguments. One is the data and the other one is the function containing the index and the element. An empty string is used to construct rows that contain the data from the JSON objects. The append[] method is used to append the string containing rows in the table.
JSON file:
Example:
GFG User Details
element. [It is looking for the all columns, which is UNION of the column names]..