Populate HTML Table With json Data
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Amruta
In this tutorial we will show you the solution of populate HTML table with json data, mainly json is used to transfer data from one file to another file using php and AJAX. It is used when we want to display our data and also not want to refresh our page.
Here, we give an example below let us understand this first.
Step By Step Guide On Populate HTML Table With json Data :-
As, there are many methods with help of which we can display our json data. Here, below we are going to create an html document containing json data and our task is to convert json data to html table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
</head>
<body style = "text-align:center;">
<p id = "THIS_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "THIS_FUN()">
click here
</button>
<br><br>
<table id="table" align = "center" border="1px"></table>
<script>
var el_up = document.getElementById("THIS_UP");
var list = [
{"col_1":"val_11", "col_2":"val_12", "col_3":"val_13"},
{"col_1":"val_21", "col_2":"val_22", "col_3":"val_23"},
{"col_1":"val_31", "col_2":"val_32", "col_3":"val_33"}
];
el_up.innerHTML = "Click on the button to create the "
+ "table from the JSON data.<br><br>"
+ JSON.stringify(list[0]) + "<br>"
+ JSON.stringify(list[1]) + "<br>"
+ JSON.stringify(list[2]);
function THIS_FUN() {
var cols = [];
for (var i = 0; i < list.length; i++) {
for (var k in list[i]) {
if (cols.indexOf(k) === -1) {
// Push all keys to the array
cols.push(k);
}
}
}
var table = document.createElement("table");
// Create table row tr element of a table
var tr = table.insertRow(-1);
for (var i = 0; i < cols.length; i++) {
var theader = document.createElement("th");
theader.innerHTML = cols[i];
// Append columnName to the table row
tr.appendChild(theader);
}
for (var i = 0; i < list.length; i++) {
// Create a new row
trow = table.insertRow(-1);
for (var j = 0; j < cols.length; j++) {
var cell = trow.insertCell(-1);
// Inserting the cell at particular place
cell.innerHTML = list[i][cols[j]];
}
var el = document.getElementById("table");
el.innerHTML = "";
el.appendChild(table);
}
</script>
</body></html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, as you can see that first we store json data into object. Here for this we put all the keys in a list.
- Then to show data in table, we create a table using table tag.
- Inside table we create tr to give headings to the table. Then we create our each th for tr as you can see above.
- Then for every entry in the object we create a cell and insert it into a particular row.
- And the columns is left empty if there is no value for this. We hope that you understand the above codes properly using these steps.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to populate html table with json data.
I hope this tutorial on populate HTML table with json data helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
