使用附加显示对 html 表的 json 响应的 jquery 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9760661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery code to display json response to a html table using append
提问by user1265530
Can some one help me out with code to display the json data in html table
有人可以用代码帮助我在 html 表中显示 json 数据吗
$.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数据
json response data:
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
}
]
回答by The Alpha
You didn't give more information but anyway, If your json (data) structure is something like this
您没有提供更多信息，但无论如何，如果您的 json（数据）结构是这样的
{
"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
$.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');
});?
});?
});
回答by dwerner
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.
这利用了 jQuery 的 html dom 对象创建 - 需要将完整的 html 发送到 jQuery 函数而不是 css 选择器。
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.
例如，var d = $('<div></div>', { text : 'sometext' });创建一个<div>dom 元素，其中包含文本 'sometext'。然后需要将它附加到 dom 中的某个地方，这样d.appendTo($('#someotherdiv'))就可以了。
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.
在您的示例中，我只是遍历每个 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 = $('<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>
回答by Adween
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.
作为您已有答案的替代方案，以及针对本文中其他人的答案。我最近有一个类似的任务，并创建了一个小的 jquery 插件来为我做这件事。它在缩小后的 3KB 以下非常小，并且具有排序、分页以及显示和隐藏列的能力。
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
使用 css 进行自定义应该很容易。可以在此处找到更多信息http://mrjsontable.azurewebsites.net/，您可以在 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 成功方法中，您将需要这样的东西
$.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!
希望它可以帮助别人！
