Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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
    }
]
like image 691
user1265530 Avatar asked Mar 18 '12 17:03

user1265530


2 Answers

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');
        });​
    });​
});
like image 111
The Alpha Avatar answered Oct 20 '22 19:10

The Alpha


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>
like image 23
dwerner Avatar answered Oct 20 '22 18:10

dwerner