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>

Answer 2

您的代码有几个问题：

您要迭代的ordered_teams数组包含在data数组的第一个对象中，而您要迭代data数组本身。
您正在jQuery.each函数中使用key和value，并在其中使用未定义的i索引。

以下代码应该起作用：

$(document).ready(function() {
  $.getJSON("https://worldcup.sfg.io/teams/group_results?group_id=A", function(data) {
    if (data && data.length > 0) {
      var group_data = '';
      $(data[0].ordered_teams).each(function(i, ordered_team) {
        group_data += '<tr>';
        group_data += '<td>' + ordered_team.country + '</td>';
        group_data += '<td>' + ordered_team.wins + '</td>';
        group_data += '<td>' + ordered_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>

N.B。在访问data[0]之前，我还建议您检查data至少包含一项。

Answer 3

根据此API https://worldcup.sfg.io/teams/group_results 结果有2次迭代。 1个代表小组，2个代表团队。因此，如果您只想获得第一组即团队A 那么您必须在数据中传递0，例如data [0] .ordered_teams 然后迭代ordered_teams，您就会得到答案。

<script>
    $(document).ready(function () {
        $.getJSON("https://worldcup.sfg.io/teams/group_results", function (data) {
            var group_data = '';
            console.log(data)
            $.each(data[0].ordered_teams, function (key, value) {
                group_data += '<tr>';
                group_data += '<td>' + data[0].ordered_teams[key].country + '</td>';
                group_data += '<td>' + data[0].ordered_teams[key].wins + '</td>';
                group_data += '<td>' + data[0].ordered_teams[key].losses + '</td>';
                group_data += '</tr>';
            });
            $('#group_A_table').append(group_data);
        });
    });
</script>

如果您希望所有小组成员都在列表中，请执行此操作。

<script>
    $( document ).ready(function() {
        $.getJSON("https://worldcup.sfg.io/teams/group_results", function(data){ 
            var group_data = '';
            console.log(data)
            $.each(data, function(key, value){
                $.each(data[key].ordered_teams, function(keya, value){
                    console.log(data[key].ordered_teams[keya].country)
                console.log(data[key].ordered_teams[keya].wins)
                console.log(data[key].ordered_teams[keya].losses)
                group_data += '<tr>';
                group_data += '<td>'+data[key].ordered_teams[keya].country+'</td>';
                group_data += '<td>'+data[key].ordered_teams[keya].wins+'</td>';
                group_data += '<td>'+data[key].ordered_teams[keya].losses+'</td>';
                group_data += '</tr>';
            });
            });
            $('#group_A_table').append(group_data);    
        });
    });
</script>

Answer 4

在使用$ .each循环时，您实际上并不需要像'i'这样的计数器变量，

您已经定义了索引和值计数器，

您的代码应进行以下修改：

$(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>' + value.country + '</td>';
      group_data += '<td>' + value.wins + '</td>';
      group_data += '<td>' + value.losses + '</td>';
      group_data += '</tr>';
    });
    $('#group_A_table').append(group_data);
  });
});

AJAX请求未显示我已请求的任何数据？

4 个答案: