Menu
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
}
]
691
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');
});
});
});
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
