jquery代码，使用append显示对html表的json响应

有人可以用代码来帮助我在html表中显示json数据

$.getJSON("http://10.0.2.2:8080/v1/service/1", function(data) { $.each(data, function(id, obj){ }); });    

我想在显示表中显示json数据

json响应数据：

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

Answer 1

你没有提供更多的信息，但无论如何，如果你的json（数据）结构是这样的

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

那么你可以在你的回调函数中做

 $.each(data, function(key, val) { $('ID: '+key+''+val+'').appendTo('#display'); }); 

这将使一个表像这个例子 。 希望它能帮助你完成你的工作。

更新

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

这是一个例子 。

你的完整getJSON

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

Answer 2

这使得jQuery的html dom对象创建 – 需要完全形成html发送到jQuery函数而不是css选择器。

例如， var d = $('

', { text : 'sometext' }); 创建一个

dom元素，其中包含文本“sometext”。 然后它需要被附加在dom中的某个地方，所以d.appendTo($('#someotherdiv'))会做到这一点。

在您的示例中，我只是迭代每个json对象的属性以生成每一行。 如果json变得更加嵌套，那么递归函数可能会更好/更清晰。

  $.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 = $(''); // build a row $.each(obj, function(colIndex, property) { data = $('', { //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 }); });    

Answer 3

作为您已经拥有的答案的替代方案，以及其他来自此post的答案。 我最近有一个类似的任务，并为我创建了一个小的jquery插件。 它非常小，在3KB以下缩小，并具有排序，分页和显示和隐藏列的能力。

使用css进行自定义应该很容易。 更多信息可以在这里找到http://mrjsontable.azurewebsites.net/ ，你可以在github上找到你想做的项目https://github.com/MatchingRadar/Mr.JsonTable

要使其工作，请下载文件并将其弹出您的网站。 按照说明操作，您最终应该得到以下内容：

然后在getJSON成功方法中你会想要这样的东西

 $.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 }); }); 

希望它能帮助别人！