How do i put JSON data in html page - html

Question

This is my json data which i get in rest client.
I am fetching firstName,lastName,emailId of my employee table and i need to insert this data into my html page.
how to do that please help
i am struck here.
[
{
"firstName": "Ramu",
"lastName": "Poola",
"emailId": "asdfg#gmail.com"
},
{
"firstName": "Dash",
"lastName": "Board",
"emailId": "admin#gmail.com"
},
{
"firstName": "Srinivas",
"lastName": "Grandhi",
"emailId": "123grandhi#gmail.com"
}
]

Answer 1

I think better to use javascript or jquery here..
Check below code...
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Answer 2

There are many ways to do this, most ways probably use javascript. Do you want to display the results in a table?
If so you could use jQuery Datatables:
http://www.datatables.net/examples/data_sources/js_array.html
This will also allow give you a lot of table features like sorting and searching without you having to write the code yourself.
var dataSet = [ {
"firstName": "Ramu",
"lastName": "Poola",
"emailId": "asdfg#gmail.com"
},
{
"firstName": "Dash",
"lastName": "Board",
"emailId": "admin#gmail.com"
},
{
"firstName": "Srinivas",
"lastName": "Grandhi",
"emailId": "123grandhi#gmail.com"
}
]
$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "firstName" },
{ "title": "lastName" },
{ "title": "emailId" }
]
} );
Alternatively you could go for a framework like AngularJS and just use a ng-repeat to render your table. This is a whole framework though, but it works well with rest apis

Answer 3

you need just set ant div with one id or class name aftre put this
content on that div
var logData = JSON.parse(data);
var $grouplist = $('#surat');
$.each(logData, function() {
var dthtml="";
dthtml += "<table><tr><td align='center'>"+this.firstname+"<br/></td><td><table><tr><td><img src='img/login.png'>"+this.lastname+"</td></tr><tr><td>"+this.emailId+"</td></tr></table></td></tr></table>";
$(dthtml).appendTo($grouplist);
});
<div id='surat'></div>