jquery - JSON 到 <table>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5996805/
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 - JSON to <table>
提问by P.Brian.Mackey
I have Json of the form
我有以下形式的 Json
[{"id":39,"data":1},{"id":40,"data":2}]
It does not parse properly with jQuery.parseJSON()
它没有正确解析 jQuery.parseJSON()
I need to take this data and create a html table. I was thinking of creating the HTML dynamically in the js.
我需要获取这些数据并创建一个 html table。我正在考虑在 js 中动态创建 HTML。
A. How can I parse the json?
B. Is dynamic html the best route?
A. 如何解析 json？
B. 动态 html 是最佳途径吗？
Update
I apologize. Evidently my question is not clear. Here is the jquery
更新
我道歉。显然我的问题不清楚。这是jquery
$.get('Service.aspx',
{ p1: value, p2: value },
function (data) {
notesJson = data;
alert(notesJson);//Json comes back as I said here...
var noteSet = jQuery.parseJSON(notesJson);
alert(noteSet.notes);
});
notes does exist in the Json. The second alert fails "undefined".
Json 中确实存在注释。第二个警报失败“未定义”。
回答by Naftali aka Neal
Ok based on you comment on your question:
好的，基于您对问题的评论：
Use $.getJSONinstead of $.get:
使用$.getJSON代替$.get：
$.getJSON('someurl', {/*somedata*/}, function(json_data){
//no need for parsejson
//use the json_data object
var table_obj = $('table');
$.each(json_data, function(index, item){
var table_row = $('<tr>', {id: item.id});
var table_cell = $('<td>', {html: item.data});
table_row.append(table_cell);
table_obj.append(table_row);
})
})
回答by Hogan
What you have is an array, you need an object. Try
你拥有的是一个数组，你需要一个对象。尝试
{ "notes" : [{"id":39,"data":1},{"id":40,"data":2}] }
as the json
作为 json
or do this
或者这样做
alert(noteSet[0]);
alert(noteSet[1]);
回答by Afshin Mehrabani
Here's another good library to simply achieve that: https://github.com/afshinm/Json-to-HTML-Table
这是另一个很好的库，可以简单地实现这一目标：https: //github.com/afshinm/Json-to-HTML-Table
Just pass the JSON data to this library and get the HTML table:
只需将 JSON 数据传递给这个库并获取 HTML 表：
//Only first parameter is required
var jsonHtmlTable = ConvertJsonToTable(objectArray, 'jsonTable', null, 'Download');
回答by Julien
You say you're using .NET so you could use
你说你正在使用 .NET 所以你可以使用
return Json(yourObject, JsonRequestBehavior.AllowGet);
instead of JavaScriptSerializer. You won't have to parse it.
而不是 JavaScriptSerializer。你不必解析它。
回答by Omkar Khair
回答by Juan Herrera
Here's another way taking into account the headings of the table for a typical database query. Based on Neil's answer:
这是考虑典型数据库查询表标题的另一种方法。根据尼尔的回答：
$.getJSON('bower.json', {}, function(json_data) {
var table = $('table');
$.each(json_data, function(key, item) {
var table_row = $('<tr>');
$.each(item, function(itemKey, itemValue) {
if (key == 0) {
table.append($('<th>', {html: itemKey}));
}
table_row.append($('<td>', {html: itemValue}));
});
table.append(table_row);
});
});
回答by A_BOSS
Try this full code:
试试这个完整的代码：
<head>
<script type="text/javascript">
$.getJSON('URL', function(json_data){
var table_obj = $('table');
$.each(json_data, function(index, result){
var table_row = $('<tr>', {});
var table_cell1 = $('<td>', {html: result.firstName});//result.yourDataAttributes
var table_cell2 = $('<td>', {html: result.lastName});
var table_cell3 = $('<td>', {html: result.age});
table_row.append(table_cell1,table_cell2,table_cell3);
table_obj.append(table_row);
})
});
</script>
</head>
<body>
<table id=""></table>
</body>
