javascript - 如何使用ajax检索JSON文件数据以及当用户单击按钮时内容显示在表中？

Question

我正在尝试动态生成一个表格，然后在我的网页中对该表格的元素进行排序，但我无法从 JSON 文件中检索数据单击按钮即可生成表格。我能知道我的代码哪里出了问题吗？

// teamdetail.json file data:
{
  "teamList": [{
      "date": "24/07/2016",
      "venue": "Bengaluru",
      "matchdetails": "Qualifier 1 ? Gujarat Lions vs Royal Challengers Bangalore"
    }, {
      "date": "25/07/2016",
      "venue": "Delhi",
      "matchdetails": "Eliminator ? Sunrisers Hyderabad vs Kolkata Knight Riders"
    },
    {
      "date": "27/07/2016",
      "venue": "Bengaluru",
      "matchdetails": "Qualifier 2 ? Q1 Loser vs EL Winner"
    }
  ]
}

$(document).ready(function() {
  $("#getdetail").click(function() {
    $.getJSON('teamdetail.json', function(data) {
      var detail = '<tr><th colspan = 3>Playoff Team Schedule</th></tr>' +
        '<tr><th>Date</th><th>Venue</th><th>Match Details</th></tr>';
      $.each(data, function(key, value) {
        detail += '<tr>';
        detail += '<td>' + value.date + '</td>';
        detail += '<td>' + value.venue + '</td>';
        detail += '<td>' + value.matchdetails + '</td>';
        detail += '</tr>';
      });
      $('#teamdetail').append(detail);
    });
  });
});

<button type="button" id="getdetail">Get Team Details</button>
<table id="teamdetail"></table>

Answer 1

您的问题是因为您的 JSON 响应不是数组 - 它是一个具有属性 teamList 的对象，该属性是您想要循环的数组。

如果将 $.each(data, ...) 替换为 $.each(data.teamList, ...) 它应该可以正常工作。