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

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><scripttype="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"
  }
];


functioncreateTable(){
	$('#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;
}
tabletd, tableth{
	border: 1px solid black;
  text-align: left;
}
tablethead{
	background:#ccc;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><divid="content"></div>

Solution 4:

vardata= jsonObject;
vartable= document.createElement("table");
vartr= document.createElement("tr");
varthUserID= document.createElement("th");
varthUserName= document.createElement("th");
varthPassword= document.createElement("th");
varthCountry= document.createElement("th");
varthEmail= 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++) {
    varuserID= data[i].UserID;
    varuserName= data[i].UserName;
    varpassword= data[i].Password;
    varcountry= data[i].Country;
    varemail= data[i].Email;
    vartr= document.createElement("tr");
    vartdUserID= document.createElement("td");
    tdUserID.innerText = userID;
    vartdUserName= document.createElement("td");
    tdUserName.innerText = userName;
    vartdPassword= document.createElement("td");
    tdPassword.innerText = password;
    vartdCountry= document.createElement("td");
    tdCountry.innerText = country;
    vartdEmail= 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);