Geek Answers Handbook

JQuery to display json response on html table by adding

Can someone help me with code to display 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 json data in a mapping 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 } ]
+8
json jquery jquery-ui
source share
3 answers

You have not provided any more information, but in any case, if your json (data) structure looks 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 this helps you do your job.

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'); });​ });​ });
+15
source share

This uses the creation of a jQuery html dom object - which must be fully formed html, sent to the jQuery function, not the css selector.

For example, var d = $('<div></div>', { text : 'sometext' }); creates a <div> dom element with the text "sometext" inside it. Then it should be added 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 create each row. If 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>
+2
source share

As an alternative to the answers that you already have, and for others who come to this position. I recently had a similar task, and I created a small jquery plugin for this. Its quite a bit under 3KB, and sorting, paging and the ability to show and hide columns.

Using CSS you can easily customize it. More information can be found here http://mrjsontable.azurewebsites.net/ , and the project is available to you as you want using github https://github.com/MatchingRadar/Mr.JsonTable

To download it, upload the files and put them on your site. Follow the instructions and you should get something like the following:

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

Then in getJSON success method you 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 this helps someone else!

0
source share

More articles:


All Articles