In this Post we will learn to make html table using JavaScript. we convert json into html table using JavaScript
so before dive to the code let us understand what is json .
JSON or JavaScript Object Notation, is a simple easy to understand data format. JSON is lightweight and language independent and that is why it’s commonly used with jQuery Ajax for transferring data. Here, in this article I’ll show you how to convert JSON data to an HTML table dynamically using JavaScript. In addition, you will learn how you can dynamically create a table in JavaScript using Create Element() Method.
Here is json we are going to use in this example
[
{
"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"
}
]
The above JSON has an array of three different Books with its ID, Name,the Category it belongs and its Price. Now lets convert this json to html table Here is the code
<!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>
You can also do the same thing by the below code :
<html>
<head>
<title>Convert JSON Data to HTML Table</title>
<script>
// json
// CREATE DYNAMIC TABLE.
function CreateTableFromJSON()
{
var myBooks = [
{
"BookID": "1",
"BookName": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"
},
{
"BookID": "2",
"BookName": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"BookID": "3",
"BookName": "Popular Science",
"Category": "Science",
"Price": "210.40"
}
]
var tableBody = '<table width="100%" cellpadding="3" align="center" style="font-size:12px;border-collapse:collapse;" border="1"><tr style="font-weight:bold;background:#16A1E7;"><td style="color:white;">Bookid</td><td style="color:white;">Book Name</td><td style="color:white;">Category</td><td style="color:white;">Price</td></tr>';
myBooks.forEach(function(d)
{
tableBody += '<tr><td>'+d.BookID+'</td><td>'+d.BookName+'</td><td>'+d.Category+'</td><td>'+d.Price+'</td></tr>';
});
tableBody += '<table>';
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = tableBody;
}
</script>
</head>
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<p id="showData"></p>
</body>
</html>
Hits: 4898