Display json Data In HTML Table Using JavaScript Dynamically
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of display json data in html table using JavaScript dynamically, when speaking about dynamic we can edit user input of JSON data it not affects the result.
It result html table with updated JSON data. JSON (Javascript Object Notation) is a lightweight, text-based, language-independent used for transmitting data in web application.
Let see below how to display json data in html table using javascript with step by step guidance.
Step By Step Guide On Display json Data In HTML Table Using JavaScript Dynamically :-
We are created JSON data and stored in array. first we need to collect table header details from JSON data array and create one table dynamically.
In table we need to append collected table header using appendChild() method in javascript. From JSON data row values append to table by column wise using innerHTML.
Finally for append the table into html webpage we used declared <p> tag as a container in html.
<!DOCTYPE html>
<html>
<head>
<title>Convert JSON Data to HTML Table</title>
<style>
th, td, p, input {
font:14px Verdana;
}
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<p id="showData"></p>
</body>
<script>
function CreateTableFromJSON() {
var myBooks = [
{
"Book ID": "1",
"Book Name": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"
},
{
"Book ID": "2",
"Book Name": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"Book ID": "3",
"Book Name": "Popular Science",
"Category": "Science",
"Price": "210.40"
}
]
// EXTRACT VALUE FOR HTML HEADER.
// ('Book ID', 'Book Name', 'Category' and 'Price')
var col = [];
for (var i = 0; i < myBooks.length; i++) {
for (var key in myBooks[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < myBooks.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myBooks[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
</script>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- In <style> tag we th, td, p, input styled these tags with same property ‘font:14px Verdana;’. That ‘14px’ defines font-size and ‘Verdana’ name of font-family.
- We style these tags table, th, td with some property. Let see each one ‘border: solid 1px #DDD;’ defines ‘solid’: border-style, ‘1px’: border-thickness, ‘#DDD’: border-color. In ‘border-collapse: collapse;’ defines border should collapse into single border. In ‘padding: 2px 3px;’ space between margin and text should be top,bottom to ‘2px’ and right,left to ‘3px’. For ‘text-align: center;’ align texts into center of elements.
- ‘font-weight:bold;’ when using this property those texts to become more thicker and this style used for ‘th’ tag.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- For generate button option we created one input tag with button type with ‘onclick="CreateTableFromJSON()"’ event. It when user clicks on this button it start to CreateTableFromJSON() load this function in script.
- <p> tag used as a container for appends the result of JSON data table by id ‘showData’. In <script> we defined JSON data array called ‘myBooks’ and has four keys namely ‘Book ID, Book Name, Category, Price’ with respective values. We can also edit these JSON data with your own way.
- For access table column we created array variable ‘col’. For loop used for access all values in array. ‘myBooks.length’ has JSON data array length so ‘i < myBooks.length’ this loop active up to when it reach equal and not above to array length. ‘key’ as we seen above in 10th point and push() used to pushed keys into col array.
- We created dynamic table using ‘createElement()’ method refers variable ‘table’. We need to point the first row in table so used ‘insertRow(-1)’ to inserted row with position as ‘-1’, it refers variable ‘tr’.
- Same as for loop in we seen in point 11th up to col.length. Here we created ‘th’ table header like table and col[] has array of JSON array keys those values are bind with table header and its appen to table 1st row.
- Same as 11th point we defined two dimension array loop and collects all JSON data values inserted to row cells with respect to col.length. ‘myBooks[i][col[j]]’ it refers JSON data array values.
- Then final table with retrieved values ‘divContainer.appendChild(table)’ binds to <p> tag.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on display json data in html table using JavaScript dynamically helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion we are able to know how display JSON data into html table dynamically using javascript.
We need server support so when executing this program don’t forget to run server.
Finally when clicks on ‘Create table from JSON’ button retrieved JSON data inserted to html table and display on webpage.
If you want to use JSON file with different key and values, we can edit this JSON data array as your wish.
About Dikshita
