我有以下从 WCF RESTful 服务 返回的 JSON 数据。
{"Cities":["LUSAKA","HARARE"],"Countries":["ZAMBIA","ZIMBABWE"]}
我正在尝试使用此数据填充以下 HTML 表。
<table id="location" border='1'>
<tr>
<th>Countries</th>
<th>Cities</th>
</tr>
</table>
下面的代码可以工作，但是，它依赖于国家或城市的索引，并且我无法从匿名函数中的 item 变量访问数据。
var trHTML = '';
$.each(data.Countries, function (i, item) {
trHTML += '<tr><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
});
$('#location').append(trHTML);
但是，如果我尝试像这样访问数据，它就不起作用:
$.each(data.d.results,function(d, item){
$("#location tbody").append(
"<tr>"
+"<td>"+item.Countries+"</td>"
+"<td>"+item.Cities+"</td>"
+"</tr>" )
})
如何使用上面循环函数中的 item 变量访问数据？
这是完整的工作代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>WCF Client</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<table id="location" border='1'>
<tr>
<th>Countries</th>
<th>Cities</th>
</tr>
</table>
<script>
var service = 'http://localhost/DistributedDataSystem/Service.svc/';
$(document).ready(function(){
jQuery.support.cors = true;
$.ajax(
{
type: "GET",
url: service + '/GetAllCountries/',
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var trHTML = '';
$.each(data.Countries, function (i, item) {
trHTML += '<tr><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
});
$('#location').append(trHTML);
},
error: function (msg) {
alert(msg.responseText);
}
});
})
</script>
</body>
</html>
最佳答案
由于您有 2 个独立的数组 Countries 和 Cities，因此没有统一的项目集合，每个数组都有一个 Countries 和 城市 属性(property)。
此外，在修改后的代码中，您尝试在 data.d.results 上使用 each ，我希望根据您提供的示例数据未定义它。
总体而言，您可以通过附加单独的行来改进代码，但没有有用的 item 具有您需要的两个值。
如果您可以控制 JSON 数据，则可以按如下方式重组它:
[{City:"LUSAKA",Country:"ZAMBIA"},{City:"HARARE", Country: "ZIMBABWE"}]
然后像这样访问它:
$.each(data,function(i,item){
$("#location tbody").append(
"<tr>"
+"<td>"+item.Country+"</td>"
+"<td>"+item.City+"</td>"
+"</tr>" )
})
关于jquery - 使用 JSON 格式的数据通过 JQuery AJAX 填充 HTML 表 : How to access data from variable in loop?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32660751/