我正在尝试显示来自 JSON 链接的数据。我尝试了多种显示它的方法,但它要么不出现,要么显示 undefined
或 [object, Object]
。
我希望结果是 France, 4, 1
等,以表格形式显示。
$(document).ready(function() {
$.getJSON("https://worldcup.sfg.io/teams/group_results?group_id=A", function(data) {
var group_data = '';
$.each(data, function(key, value) {
group_data += '<tr>';
group_data += '<td>' + data.ordered_teams[i].country + '</td>';
group_data += '<td>' + data.ordered_teams[i].wins + '</td>';
group_data += '<td>' + data.ordered_teams[i].losses + '</td>';
group_data += '</tr>';
});
$('#group_A_table').append(group_data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<h1>Group Stages</h1>
<h2>Group A</h2>
<br />
<table class="table table-bordered table-striped" id="group_A_table">
<tr>
<th>Country</th>
<th>Wins</th>
<th>Losses</th>
</tr>
</table>
</div>
这就是 JSON 链接的样子 - https://worldcup.sfg.io/teams/group_results
[{
"id": 1,
"letter": "A",
"ordered_teams": [{
"id": 1,
"country": "France",
"alternate_name": null,
"fifa_code": "FRA",
"group_id": 1,
"group_letter": "A",
"wins": 4,
"draws": 0,
"losses": 1,
"games_played": 5,
"points": 12,
"goals_for": 10,
"goals_against": 4,
"goal_differential": 6
},{
"id": 3,
"country": "Norway",
"alternate_name": null,
"fifa_code": "NOR",
"group_id": 1,
"group_letter": "A",
"wins": 2,
"draws": 1,
"losses": 2,
"games_played": 5,
"points": 7,
"goals_for": 7,
"goals_against": 7,
"goal_differential": 0
},
最佳答案
这里有两个问题。首先,您已经定义了 i
,但您正在使用 $.each()
循环来接收 key
和 value
循环中的项目,而不是索引,因此您会收到 i is undefined
错误。
解决后,第二个问题是 data
是一个数组,而 ordered_teams
是该数组第 0 个元素内的属性。因此,您需要改为循环 data[0].ordered_teams
。
$(document).ready(function() {
$.getJSON("https://worldcup.sfg.io/teams/group_results?group_id=A", function(data) {
var group_data = '';
$.each(data[0].ordered_teams, function(key, team) {
group_data += '<tr>';
group_data += '<td>' + team.country + '</td>';
group_data += '<td>' + team.wins + '</td>';
group_data += '<td>' + team.losses + '</td>';
group_data += '</tr>';
});
$('#group_A_table').append(group_data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<h1>Group Stages</h1>
<h2>Group A</h2>
<br />
<table class="table table-bordered table-striped" id="group_A_table">
<tr>
<th>Country</th>
<th>Wins</th>
<th>Losses</th>
</tr>
</table>
</div>
最后请注意,您可以通过使用 map()
和字符串插值使逻辑更加简洁,试试这个:
$(document).ready(function() {
$.getJSON("https://worldcup.sfg.io/teams/group_results?group_id=A", function(data) {
var group_data = data[0].ordered_teams.map(function(obj) {
return `<tr><td>${obj.country}</td><td>${obj.wins}</td><td>${obj.losses}</td></tr>`;
}).join('');
$('#group_A_table').append(group_data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<h1>Group Stages</h1>
<h2>Group A</h2>
<br />
<table class="table table-bordered table-striped" id="group_A_table">
<tr>
<th>Country</th>
<th>Wins</th>
<th>Losses</th>
</tr>
</table>
</div>
关于jquery - AJAX 请求不显示我请求的任何数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56900333/