SACHIN GAJBHIYE SACHIN GAJBHIYE - 4 months ago 8
JSON Question

how to convert my result in table format

I am trying post my json result in table format how should achieve that.Igot result as this is output I got

I want it to display in table format .Here is my code

<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"> </script>
</head>
<body>
<h3>Output: </h3>
<div id="output">this element will be accessed by jquery and this text replaced</div>

<script id="source" language="javascript" type="text/javascript">

$(function ()
{
$.ajax({
url: 'example.php',
data: "",

dataType: 'json',
success: function(data)

{
var html = "";
for(var i = 0; i < data.length; i++){
var uid = data[i].uid;
var firstname = data[i].firstname;
var lastname = data[i].lastname;
var email = data[i].email;
var username = data[i].username;
var password = data[i].password;

html += "<b>uid: </b>"+uid+"<b> firstname: </b>"+firstname+"<b> lastname: </b>"+lastname+"<b> email: </b>"+email+"<b> username: </b>"+username+"<b> password: </b>"+password;
}
$("#output").html( html );

}
});
});
</script>
</body>
</html>


the output is stored in var html what should I need to convert it into table format.

Answer

Just change this part of code to format table instead just bold text:

...
var html = "<table>";
html += "<thead><tr><th>UID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Username</th><th>Password</th></tr></thead>";
html += "<tbody>";
for(var i = 0; i < data.length; i++){
    html += "<tr>";

    var uid = data[i].uid;             
    var firstname = data[i].firstname;       
    var lastname = data[i].lastname;
    var email = data[i].email;
    var username = data[i].username;
    var password = data[i].password;

    html += "<td>"+uid+"</td><td>"+firstname+"</td><td>"+lastname+"</td><td>"+email+"</td><td>"+username+"</td><td>"+password+"</td></tr>"; 
}
html +="</tbody></table>";
...
Comments