How To Create HTML Table Based On JSON
I need to create HTML table based on JSON input. here is my JSON sample input. [ { 'UserID': 1, 'UserName': 'rooter', 'Password': '12345', 'Country': 'UK',
Solution 1:
Go through all elements from your JSON array and save all different keys to javascript array or similar.
Then, using all these keys create table and table header row with columns.
Then, go through all JSON objects and print one row for each object.
var data = [
{
"UserID": 1,
"UserName": "rooter",
"Password": "12345",
"Country": "UK",
"Email": "sac@gmail.com"
},
{
"UserID": 2,
"UserName": "binu",
"Password": "123",
"Country": "uk",
"Email": "Binu@gmail.com"
},
{
"UserID": 3,
"UserName": "cal",
"Password": "123",
"Country": "uk",
"Email": "cal@gmail.com"
},
{
"UserID": 4,
"UserName": "nera",
"Password": "1234",
"Country": "uk",
"Email": "nera@gmail.com"
}
];
var keys = [];
document.write("<table border==\"1\"><tr>");
for (key in data[0]) {
document.write('<td>' + key + '</td>');
}
document.write("</tr>");
for (var i = 0; i < data.length; i++) {
document.write('<tr>');
for (key in data[i]) {
document.write('<td>' + data[i][key] + '</td>');
}
document.write('</tr>');
}
document.write("</table>");
Solution 2:
I have done your job, as you don't know. Please follow my code below and do changes what you needed in your application. But you should include library files hosted by your server for faster results::
FULL CODE
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var data = [
{
"UserID": 1,
"UserName": "rooter",
"Password": "12345",
"Country": "UK",
"Email": "sac@gmail.com"
},
{
"UserID": 2,
"UserName": "binu",
"Password": "123",
"Country": "uk",
"Email": "Binu@gmail.com"
},
{
"UserID": 3,
"UserName": "cal",
"Password": "123",
"Country": "uk",
"Email": "cal@gmail.com"
},
{
"UserID": 4,
"UserName": "nera",
"Password": "1234",
"Country": "uk",
"Email": "nera@gmail.com"
}
];
$(document).ready(function () {
var html = '<table class="table table-striped">';
html += '<tr>';
var flag = 0;
$.each(data[0], function(index, value){
html += '<th>'+index+'</th>';
});
html += '</tr>';
$.each(data, function(index, value){
html += '<tr>';
$.each(value, function(index2, value2){
html += '<td>'+value2+'</td>';
});
html += '<tr>';
});
html += '</table>';
$('body').html(html);
});
</script>
AND it will look like image below:
Solution 3:
This is what I would have done
var object = [
{
"UserID": 1,
"UserName": "rooter",
"Password": "12345",
"Country": "UK",
"Email": "sac@gmail.com"
},
{
"UserID": 2,
"UserName": "binu",
"Password": "123",
"Country": "uk",
"Email": "Binu@gmail.com"
},
{
"UserID": 3,
"UserName": "cal",
"Password": "123",
"Country": "uk",
"Email": "cal@gmail.com"
},
{
"UserID": 4,
"UserName": "nera",
"Password": "1234",
"Country": "uk",
"Email": "nera@gmail.com"
}
];
function createTable(){
$('#content').append('<table id="jsonTable"><thead><tr></tr></thead><tbody></tbody></table>');
$.each(Object.keys(object[0]), function(index, key){
$('#jsonTable thead tr').append('<th>' + key + '</th>');
});
$.each(object, function(index, jsonObject){
if(Object.keys(jsonObject).length > 0){
var tableRow = '<tr>';
$.each(Object.keys(jsonObject), function(i, key){
tableRow += '<td>' + jsonObject[key] + '</td>';
});
tableRow += "</tr>";
$('#jsonTable tbody').append(tableRow);
}
});
}
$(document).ready(function(){
createTable();
});
tr:nth-child(even) td {background: #f2f2f2}
table{
border-collapse: collapse;
}
table td, table th{
border: 1px solid black;
text-align: left;
}
table thead{
background:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content"></div>
Solution 4:
var data = jsonObject;
var table = document.createElement("table");
var tr = document.createElement("tr");
var thUserID = document.createElement("th");
var thUserName = document.createElement("th");
var thPassword = document.createElement("th");
var thCountry = document.createElement("th");
var thEmail = document.createElement("th");
thUserID.innerText = "userID";
thUserName.innerText = "userName";
thPassword.innerText = "password";
thCountry.innerText = "country";
thEmail.innerText = "email";
tr.appendChild(thUserID);
tr.appendChild(thUserName);
tr.appendChild(thPassword);
tr.appendChild(thCountry);
tr.appendChild(thEmail);
for(var i=0; i<data.length; i++) {
var userID = data[i].UserID;
var userName = data[i].UserName;
var password = data[i].Password;
var country = data[i].Country;
var email = data[i].Email;
var tr = document.createElement("tr");
var tdUserID = document.createElement("td");
tdUserID.innerText = userID;
var tdUserName = document.createElement("td");
tdUserName.innerText = userName;
var tdPassword = document.createElement("td");
tdPassword.innerText = password;
var tdCountry = document.createElement("td");
tdCountry.innerText = country;
var tdEmail = document.createElement("td");
tdEmail.innerText = email;
tr.appendChild(tdUserID);
tr.appendChild(tdUserName);
tr.appendChild(tdPassword);
tr.appendChild(tdCountry);
tr.appendChild(tdEmail);
table.appendChild(tr);
}
document.body.appendChild(table);
Post a Comment for "How To Create HTML Table Based On JSON"