使用 jQuery 从 AJAX 响应（json）构建表行
Posted
技术标签:
【中文标题】使用 jQuery 从 AJAX 响应（json）构建表行【英文标题】：Using jQuery to build table rows from AJAX response(json) 【发布时间】：2013-07-17 10:28:15 【问题描述】：可能重复Nested elements
我从服务器端 ajax 响应 (Json) 获取，我正在尝试动态创建表行并将它们附加到 id=records_table 的现有表中。
我试图以可能重复的方式实施解决方案，但失败了。
我的回复是这样的：
'[
"rank":"9",
"content":"Alon",
"UID":"5"
,
"rank":"6",
"content":"Tala",
"UID":"6"
]'
需要的结果是这样的：
<tr>
<td>9</td>
<td>Alon</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>Tala</td>
<td>5</td>
</tr>
我想在不解析 Json 的情况下做一些事情，所以我尝试执行以下操作，这当然是一场灾难：
function responseHandler(response)
$(function()
$.each(response, function(i, item)
$('<tr>').html(
$('td').text(item.rank),
$('td').text(item.content),
$('td').text(item.UID)
).appendTo('#records_table');
);
);
从我的解决方案中，我在所有单元格中只得到一个数字 6 的行。我做错了什么？
【问题讨论】：
【参考方案1】：使用 .append 代替 .html
var response = "[
"rank":"9",
"content":"Alon",
"UID":"5"
,
"rank":"6",
"content":"Tala",
"UID":"6"
]";
// convert string to JSON
response = $.parseJSON(response);
$(function()
$.each(response, function(i, item)
var $tr = $('<tr>').append(
$('<td>').text(item.rank),
$('<td>').text(item.content),
$('<td>').text(item.UID)
); //.appendTo('#records_table');
console.log($tr.wrap('<p>').html());
);
);
【讨论】：
这个works 并且可以管理td 元素清理
我更新了解决方案。您需要使用 jQuery 的 $.parseJSON 函数将字符串转换为 JSON。 jsfiddle.net/abduncan/rrzZU/1
使用 jQuery 追加数据对于大数据来说不是一个好主意。您将最终出现浏览器渲染问题。相反，我们可以使用 join() 生成截断的字符串以显示
您好，但是此响应如何与将此信息添加到 html #recordsTable 相关联？
如果您查看包含注释//.appendTo('#records_table'); 的从底部算起的第4 行，它显示了您将如何将记录附加到DOM。它在此答案中被注释掉，而是将结果写入控制台以进行测试。【参考方案2】：
试试这个（演示链接已更新）：
success: function (response)
var trHTML = '';
$.each(response, function (i, item)
trHTML += '<tr><td>' + item.rank + '</td><td>' + item.content + '</td><td>' + item.UID + '</td></tr>';
);
$('#records_table').append(trHTML);
Fiddle DEMO WITH AJAX
【讨论】：
@Charlesliam 很高兴为您提供帮助..:) @NeerajSingh 链接断开 链接已过期。 有没有为 td 包含 css？ @alper 感谢您的评论，演示链接现已更新。【参考方案3】：这是来自hmkcode.com的完整答案
如果我们有这样的 JSON 数据
// JSON Data
var articles = [
"title":"Title 1",
"url":"URL 1",
"categories":["jQuery"],
"tags":["jquery","json","$.each"]
,
"title":"Title 2",
"url":"URL 2",
"categories":["Java"],
"tags":["java","json","jquery"]
];
我们要在这个表结构中查看
<table id="added-articles" class="table">
<tr>
<th>Title</th>
<th>Categories</th>
<th>Tags</th>
</tr>
</table>
以下 JS 代码将为每个 JSON 元素填充创建一行
// 1. remove all existing rows
$("tr:has(td)").remove();
// 2. get each article
$.each(articles, function (index, article)
// 2.2 Create table column for categories
var td_categories = $("<td/>");
// 2.3 get each category of this article
$.each(article.categories, function (i, category)
var span = $("<span/>");
span.text(category);
td_categories.append(span);
);
// 2.4 Create table column for tags
var td_tags = $("<td/>");
// 2.5 get each tag of this article
$.each(article.tags, function (i, tag)
var span = $("<span/>");
span.text(tag);
td_tags.append(span);
);
// 2.6 Create a new row and append 3 columns (title+url, categories, tags)
$("#added-articles").append($('<tr/>')
.append($('<td/>').html("<a href='"+article.url+"'>"+article.title+"</a>"))
.append(td_categories)
.append(td_tags)
);
);
【讨论】：
示例不再起作用，404。“这是来自 hmkcode.com 的完整答案”【参考方案4】：试试这样：
$.each(response, function(i, item)
$('<tr>').html("<td>" + response[i].rank + "</td><td>" + response[i].content + "</td><td>" + response[i].UID + "</td>").appendTo('#records_table');
);
演示：http://jsfiddle.net/R5bQG/
【讨论】：
可以改进吗？我也想对单元格进行控制，例如，如果我想在 td 中设置一个属性。 当然，这个方法很多，可以构建每个TD，然后追加，也可以直接在上面的标签中设置属性。您要添加什么属性，请举例说明。 我认为这不起作用，因为我的响应响应是字符串"[ "rank":"9", "content":"Alon", "UID":"5" , "rank":"6", "content":"Tala", "UID":"6" ]"【参考方案5】：
您不应该为每个单元格和行创建 jquery 对象。试试这个：
function responseHandler(response)
var c = [];
$.each(response, function(i, item)
c.push("<tr><td>" + item.rank + "</td>");
c.push("<td>" + item.content + "</td>");
c.push("<td>" + item.UID + "</td></tr>");
);
$('#records_table').html(c.join(""));
【讨论】：
【参考方案6】：$.ajax(
type: 'GET',
url: urlString ,
dataType: 'json',
success: function (response)
var trHTML = '';
for(var f=0;f<response.length;f++)
trHTML += '<tr><td><strong>' + response[f]['app_action_name']+'</strong></td><td><span class="label label-success">'+response[f]['action_type'] +'</span></td><td>'+response[f]['points']+'</td></tr>';
$('#result').html(trHTML);
$( ".spin-grid" ).removeClass( "fa-spin" );
);
【讨论】：
【参考方案7】：JSON 格式的数据：
data = [
"rank":"9",
"content":"Alon",
"UID":"5"
,
"rank":"6",
"content":"Tala",
"UID":"6"
]
您可以使用 jQuery 来迭代 JSON 并动态创建表：
num_rows = data.length;
num_cols = size_of_array(data[0]);
table_id = 'my_table';
table = $("<table id=" + table_id + "></table>");
header = $("<tr class='table_header'></tr>");
$.each(Object.keys(data[0]), function(ind_header, val_header)
col = $("<td>" + val_header + "</td>");
header.append(col);
)
table.append(header);
$.each(data, function(ind_row, val)
row = $("<tr></tr>");
$.each(val, function(ind_cell, val_cell)
col = $("<td>" + val_cell + "</td>");
row.append(col);
)
table.append(row);
)
这里是 size_of_array 函数：
function size_of_array(obj)
size = Object.keys(obj).length;
return(size)
;
如果需要，您还可以添加样式：
$('.' + content['this_class']).children('canvas').remove();
$('.' + content['this_class']).append(table);
$('#' + table_id).css('width', '100%').css('border', '1px solid black').css('text-align', 'center').css('border-collapse', 'collapse');
$('#' + table_id + ' td').css('border', '1px solid black');
结果：
【讨论】：
【参考方案8】：这是我从项目中复制的工作示例。
function fetchAllReceipts(documentShareId)
console.log('http call: ' + uri + "/" + documentShareId)
$.ajax(
url: uri + "/" + documentShareId,
type: "GET",
contentType: "application/json;",
cache: false,
success: function (receipts)
//console.log(receipts);
$(receipts).each(function (index, item)
console.log(item);
//console.log(receipts[index]);
$('#receipts tbody').append(
'<tr><td>' + item.Firstname + ' ' + item.Lastname +
'</td><td>' + item.TransactionId +
'</td><td>' + item.Amount +
'</td><td>' + item.Status +
'</td></tr>'
)
);
,
error: function (XMLHttpRequest, textStatus, errorThrown)
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
);
// Sample json data coming from server
var data = [
0: Id: "7a4c411e-9a84-45eb-9c1b-2ec502697a4d", DocumentId: "e6eb6f85-3f44-4bba-8cb0-5f2f97da17f6", DocumentShareId: "d99803ce-31d9-48a4-9d70-f99bf927a208", Firstname: "Test1", Lastname: "Test1",
1: Id: "7a4c411e-9a84-45eb-9c1b-2ec502697a4d", DocumentId: "e6eb6f85-3f44-4bba-8cb0-5f2f97da17f6", DocumentShareId: "d99803ce-31d9-48a4-9d70-f99bf927a208", Firstname: "Test 2", Lastname: "Test2",
]; <button type="button" class="btn btn-primary" onclick='fetchAllReceipts("@share.Id")'>
RECEIPTS
</button>
<div id="receipts" style="display:contents">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Transaction</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
【讨论】：
我使用你唯一的附加块，我在引导模式中显示数据，问题是它每次都附加，还有以前的数据。【参考方案9】：我已经创建了这个 JQuery 函数
/**
* Draw a table from json array
* @param array json_data_array Data array as JSON multi dimension array
* @param array head_array Table Headings as an array (Array items must me correspond to JSON array)
* @param array item_array JSON array's sub element list as an array
* @param string destinaion_element '#id' or '.class': html output will be rendered to this element
* @returns string HTML output will be rendered to 'destinaion_element'
*/
function draw_a_table_from_json(json_data_array, head_array, item_array, destinaion_element)
var table = '<table>';
//TH Loop
table += '<tr>';
$.each(head_array, function (head_array_key, head_array_value)
table += '<th>' + head_array_value + '</th>';
);
table += '</tr>';
//TR loop
$.each(json_data_array, function (key, value)
table += '<tr>';
//TD loop
$.each(item_array, function (item_key, item_value)
table += '<td>' + value[item_value] + '</td>';
);
table += '</tr>';
);
table += '</table>';
$(destinaion_element).append(table);
;
【讨论】：
【参考方案10】：你可以这样做：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function()
$.ajax(
url: '<Insert your REST API which you want GET/POST/PUT/DELETE>',
data: '<any parameters you want to send as the Request body or query string>',
dataType: json,
async: true,
method: "GET"
success: function(data)
//If the REST API returned a successful response it'll be stored in data,
//just parse that field using jQuery and you're all set
var tblSomething = '<thead> <tr> <td> Heading Col 1 </td> <td> Heading Col 2 </td> <td> Col 3 </td> </tr> </thead> <tbody>';
$.each(data, function(idx, obj)
//Outer .each loop is for traversing the JSON rows
tblSomething += '<tr>';
//Inner .each loop is for traversing JSON columns
$.each(obj, function(key, value)
tblSomething += '<td>' + value + '</td>';
);
tblSomething += '</tr>';
);
tblSomething += '</tbody>';
$('#tblSomething').html(tblSomething);
,
error: function(jqXHR, textStatus, errorThrown)
alert('Hey, something went wrong because: ' + errorThrown);
);
);
</script>
<table id = "tblSomething" class = "table table-hover"></table>
【讨论】：
【参考方案11】：jQuery.html 将字符串或回调作为输入，不确定您的示例是如何工作的......试试$('<tr>').append($('<td>' + item.rank + '</td>').append ...
而且您在标签来源方面有一些明确的问题。应该是$('<tr/>') 和$('<td/>')
【讨论】：
【参考方案12】：我执行以下操作以从 Ajax 获取 JSON 响应并在不使用 parseJson 的情况下进行解析：
$.ajax(
dataType: 'json', <----
type: 'GET',
url: 'get/allworldbankaccounts.json',
data: $("body form:first").serialize(),
如果你使用 dataType 作为 Text 那么你需要 $.parseJSON(response)
【讨论】：
以上是关于使用 jQuery 从 AJAX 响应（json）构建表行的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 jquery 从 Web API 获取 JSON 响应
如何使用 JSON 数据填充下拉列表作为 jQuery 中的 ajax 响应