В запросе 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,

В вашем случае уже определены счетчики индекса и значения,

Ваш код должен работатьсо следующими модификациями ::

$(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);
  });
});

Answer 2

Ваш код имеет несколько проблем:

• Массив ordered_teams, который вы пытаетесь перебрать, содержится внутри первого объекта массива data, а вы пытаетесь перебрать сам массив data.
• Вы используете key и value в функции jQuery.each и неопределенный индекс 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 в данных, подобных этим [0] .ordered_teams, а затем выполнить итерацию для orders_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

Здесь есть две проблемы. Сначала вы определили 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>