jquery - AJAX 请求不显示我请求的任何数据？

Question

我正在尝试显示来自 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
  },

Answer 1

这里有两个问题。首先，您已经定义了 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>