Я пытаюсь отобразить данные из ссылки 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  = '{amp}lt;tr{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   data.ordered_teams[i].country   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   data.ordered_teams[i].wins   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   data.ordered_teams[i].losses   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;/tr{amp}gt;'; }); $('#group_A_table').append(group_data); }); }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="table-responsive"{amp}gt; {amp}lt;h1{amp}gt;Group Stages{amp}lt;/h1{amp}gt; {amp}lt;h2{amp}gt;Group A{amp}lt;/h2{amp}gt; {amp}lt;br /{amp}gt; {amp}lt;table class="table table-bordered table-striped" id="group_A_table"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Country{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Wins{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Losses{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; 

Вот как выглядит ссылка 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 вместо этого вам нужно 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  = '{amp}lt;tr{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   team.country   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   team.wins   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   team.losses   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;/tr{amp}gt;'; }); $('#group_A_table').append(group_data); }); }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="table-responsive"{amp}gt; {amp}lt;h1{amp}gt;Group Stages{amp}lt;/h1{amp}gt; {amp}lt;h2{amp}gt;Group A{amp}lt;/h2{amp}gt; {amp}lt;br /{amp}gt; {amp}lt;table class="table table-bordered table-striped" id="group_A_table"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Country{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Wins{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Losses{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; 

Наконец, обратите внимание, что вы можете сделать логику более лаконичной, используя 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 `{amp}lt;tr{amp}gt;{amp}lt;td{amp}gt;${obj.country}{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;${obj.wins}{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;${obj.losses}{amp}lt;/td{amp}gt;{amp}lt;/tr{amp}gt;`; }).join(''); $('#group_A_table').append(group_data); }); }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="table-responsive"{amp}gt; {amp}lt;h1{amp}gt;Group Stages{amp}lt;/h1{amp}gt; {amp}lt;h2{amp}gt;Group A{amp}lt;/h2{amp}gt; {amp}lt;br /{amp}gt; {amp}lt;table class="table table-bordered table-striped" id="group_A_table"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Country{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Wins{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Losses{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; 

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

  • Массив ordered_teams вы пытаетесь 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 {amp}amp;{amp}amp; data.length {amp}gt; 0) { var group_data = ''; $(data[0].ordered_teams).each(function(i, ordered_team) { group_data  = '{amp}lt;tr{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   ordered_team.country   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   ordered_team.wins   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   ordered_team.losses   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;/tr{amp}gt;'; }); $('#group_A_table').append(group_data); } }); }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="table-responsive"{amp}gt; {amp}lt;h1{amp}gt;Group Stages{amp}lt;/h1{amp}gt; {amp}lt;h2{amp}gt;Group A{amp}lt;/h2{amp}gt; {amp}lt;br /{amp}gt; {amp}lt;table class="table table-bordered table-striped" id="group_A_table"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Country{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Wins{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Losses{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; 

NB. Прежде чем получить доступ к data[0] я бы также предложил вам проверить, что data содержат хотя бы один элемент.

Согласно этому API https://worldcup.sfg.io/teams/group_results, результат имеет 2 итерации. 1 для группы и 2 для команд. так что если вы хотите получить только для команды первой группы, которая является командой A, то вам нужно передать 0 в данных, подобных этим [0] .ordered_teams, а затем выполнить итерацию для order_teams, после чего вы получите свой ответ.

 {amp}lt;script{amp}gt; $(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  = '{amp}lt;tr{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   data[0].ordered_teams[key].country   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   data[0].ordered_teams[key].wins   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   data[0].ordered_teams[key].losses   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;/tr{amp}gt;'; }); $('#group_A_table').append(group_data); }); }); {amp}lt;/script{amp}gt; 

если вы хотите, чтобы все группы в списке, то сделайте это.

 {amp}lt;script{amp}gt; $( 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  = '{amp}lt;tr{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;' data[key].ordered_teams[keya].country '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;' data[key].ordered_teams[keya].wins '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;' data[key].ordered_teams[keya].losses '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;/tr{amp}gt;'; }); }); $('#group_A_table').append(group_data); }); }); {amp}lt;/script{amp}gt; 

Вам на самом деле не нужна никакая переменная счетчика, такая как ‘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  = '{amp}lt;tr{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   value.country   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   value.wins   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;td{amp}gt;'   value.losses   '{amp}lt;/td{amp}gt;'; group_data  = '{amp}lt;/tr{amp}gt;'; }); $('#group_A_table').append(group_data); }); });