jquery code to display json response to a html table using append

Question

Can some one help me out with code to display the json data in html table

 $.getJSON("http://10.0.2.2:8080/v1/service/1",
  function(data) {

    $.each(data, function(id, obj){

      });
});


<body>
   <table id="display">
   </table>
</body>

I want to display the json data in display table

json response data:

[
    {
        "firstcolumn":"56036",
        "loc":"Deli",
        "lastA":"Activity",
        "mTime":"2011-02-01 11:59:26.243",
        "nTime":"2011-02-01 10:57:02.0",
        "Time":"2011-02-01 10:57:02.0",
        "Age":"9867 Hour(s)",
        "ction":"                                                  ",
        "nTime":null
    },
    {
        "firstcolumn":"56036",
        "loc":"Deli",
        "lastA":"Activity",
        "mTime":"2011-02-01 11:59:26.243",
        "nTime":"2011-02-01 10:57:02.0",
        "Time":"2011-02-01 10:57:02.0",
        "Age":"9867 Hour(s)",
        "ction":"                                                  ",
        "nTime":null
    },
    {
        "firstcolumn":"56036",
        "loc":"Deli",
        "lastA":"Activity",
        "mTime":"2011-02-01 11:59:26.243",
        "nTime":"2011-02-01 10:57:02.0",
        "Time":"2011-02-01 10:57:02.0",
        "Age":"9867 Hour(s)",
        "ction":"                                                  ",
        "nTime":null
    },
    {
        "firstcolumn":"56036",
        "loc":"Deli",
        "lastA":"Activity",
        "mTime":"2011-02-01 11:59:26.243",
        "nTime":"2011-02-01 10:57:02.0",
        "Time":"2011-02-01 10:57:02.0",
        "Age":"9867 Hour(s)",
        "ction":"                                                  ",
        "nTime":null
    }
]

post what the structure of the json object is. – Rooster Mar 18 '12 at 18:10 — Rooster, Mar 18 '12 at 18:10

The Alpha · Answer 1 · 2012-03-18T19:17:50.977

16

You didn't give more information but anyway, If your json (data) structure is something like this

{
  "key_one": "value_one",
  "key_two": "value_two",
  "key_three": "value_three"
}

then you can do in your callback function

$.each(data, function(key, val) {
    $('<tr><td>ID: '+key+'</td><td id="'+key+'">'+val+'</td><tr>').appendTo('#display');
});

This will make a table like this example. hope it'll help you to get done your work.

Update

function(data) {
    $.each(data, function(key, val) {
        var tr=$('<tr></tr>');
        $.each(val, function(k, v){
            $('<td>'+v+'</td>').appendTo(tr);
        });
        tr.appendTo('#display');
    });
});

Here is an example.

Your full getJSON

$.getJSON("http://10.0.2.2:8080/v1/service/1",
    function(data) {
        $.each(data, function(key, val) {
            var tr=$('<tr></tr>');
            $.each(val, function(k, v){
                $('<td>'+v+'</td>').appendTo(tr);
            });
            tr.appendTo('#display');
        });
    });
});

edited Mar 18 '12 at 19:17

answered Mar 18 '12 at 18:46

The Alpha

143,660
29
287
307

1

Are you sure you didn't make any mistakes, pls look at the fiddle here http://jsfiddle.net/v4REx/2/ – The Alpha Mar 18 '12 at 19:14
I am trying this in phonegap android simulator will that make any difference – user1265530 Mar 18 '12 at 19:19
Look at this, almost same thing here http://stackoverflow.com/questions/7925528/phonegap-android-getjson – The Alpha Mar 18 '12 at 19:31
I am able to get json data from the service but not sure why the data is not being displayed in the table – user1265530 Mar 18 '12 at 19:44
Can you test this $("#display").append("Appended"); and see what happens ? – The Alpha Mar 18 '12 at 19:49
where do you want me to add that statement – user1265530 Mar 18 '12 at 19:53

dwerner · Answer 2 · 2012-03-18T19:06:40.653

This makes use of jQuery's html dom object creation - which need to be fully formed html sent to the jQuery function instead of a css selector.

For example, var d = $('<div></div>', { text : 'sometext' }); creates a <div> dom element, with the text 'sometext' within it. It then needs to be appended somewhere in the dom, so d.appendTo($('#someotherdiv')) will do the trick.

In your example, I just iterate over the properties of each json object to produce each row. If the json becomes more deeply nested, perhaps a recursive function would be better/clearer.

 $.getJSON("http://10.0.2.2:8080/v1/service/1",
  function(data) {
       var table = $('#display'), row = null, data = null;
       $.each(data, function(id, obj){
               row = $('<tr></tr>'); // build a row
               $.each(obj, function(colIndex, property) {
                   data = $('<td></td>', { //build a td element
                       text : property[colIndex] // assign the value from the iterated json property
                   }).appendTo(row); 
               });
           });
           row.appendTo(table); //finally append the row to the table
      });
});


<body>
   <table id="display">
   </table>
</body>

score 0 · Answer 3 · answered Jan 30 '14 at 09:51

As an alternative to the answers you already have, and for others that come accross this post. I recently had a similar task and created a small jquery plug in to do it for me. Its pretty small under 3KB minified, and has sorting, paging and the ability to show and hide columns.

It should be pretty easy to customize using css. More information can be found here http://mrjsontable.azurewebsites.net/ and the project is available for you to do as you wish with on github https://github.com/MatchingRadar/Mr.JsonTable

To get it to work download the files and pop them in your site. Follow the instructions and you should end up with something like the following:

<div id="loctable"></div>

Then in the getJSON success method you will want something like this

$.getJSON("http://10.0.2.2:8080/v1/service/1", function(data) {
    $("#loctable").mrjsontable({
        tableClass: "my-table",
        pageSize: 10, //you can change the page size here
        columns: [
            new $.fn.mrjsontablecolumn({
                heading: "ID",
                data: "firstcolumn",
                type: "int"
            }),
            new $.fn.mrjsontablecolumn({
                heading: "Location",
                data: "loc"
            }),
            new $.fn.mrjsontablecolumn({
                heading: "Last A",
                data: "lastA"
            }),
            new $.fn.mrjsontablecolumn({
                heading: "mTime",
                data: "mTime",
                type: "datetime"
            }),
            new $.fn.mrjsontablecolumn({
                heading: "nTime",
                data: "nTime",
                type: "datetime"
            }),
            new $.fn.mrjsontablecolumn({
                heading: "Time",
                data: "Time",
                type: "datetime"
            }),
            new $.fn.mrjsontablecolumn({
                heading: "Age",
                data: "Age"
            })
        ],
        data: data
    });
});

Hope it helps somebody else!

jquery code to display json response to a html table using append

3 Answers3

Linked