How do i put JSON data in html page

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"
    }
]

You may want to [Display JSON Data in HTML Table](http://stackoverflow.com/questions/19901843/display-json-data-in-html-table) — Rahul Desai, Nov 21 '14 at 06:39
you want this http://stackoverflow.com/questions/14100323/example-to-write-json-data-by-jquery-with-html-text — Exhausted, Nov 21 '14 at 06:40

Hasmukh Mistry · Answer 1 · 2014-11-21T06:50:10.140

0

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>

edited Nov 21 '14 at 06:50

answered Nov 21 '14 at 06:40

Hasmukh Mistry

129
1
18

1

Instead of posting a link to [w3schools](http://www.w3fools.com/), why don't you try and use that code with OP's JSON and post a proper answer? – Vucko Nov 21 '14 at 06:41

score 0 · Answer 2 · answered Nov 21 '14 at 07:42

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

Hussy Borad · Answer 3 · 2014-11-21T06:55:13.837

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>

How do i put JSON data in html page

3 Answers3