无法解析 Ajax Json

Question

我正在尝试新的 Twitch API 和 Jquery Ajax 的新功能。我已经成功完成了一个 Ajax 请求（对于热门游戏列表）并将其输出到控制台日志并检查了控制台结果以确保结果有效。

但是，我无法将 Json 成功解析为 HTML 以供显示：

1) 输出显示'undefined'

2) 它没有迭代整个 Json 结果集（显示 2 个而不是 19 个结果）

有什么建议吗？谢谢

新 Twitch API 参考： https://dev.twitch.tv/docs/api/reference/#get-top-games

<script>
  $.ajax('https://api.twitch.tv/helix/games/top',
      {
        headers: {
          "Client-ID":  'XXXXXXXXXXXXXXXXX'
        },
        dataType: 'json',
        success: function ( data ) {
            var content = '';
            $.each(data, function(index, element){
                content += 'id: ' + element.id + '<br />';
                content += 'name: ' + element.name + '<br />';
                $('#output').html(content);
            });
        }
      })
      .then(console.log);
</script>

</head>
<body>

<div id="output"></div>

</body>

Answer 1

在documentation中可以看到响应中返回了data属性。因此，您需要遍历 data.data，而不仅仅是 data。第一个 data 指的是您通过 success 处理程序的参数接收到的整个对象，第二个 data 指的是该对象中的属性。

为了避免混淆，值得将 success 处理程序中的参数重命名为 response 等。

另请注意，您在循环的每次迭代中都附加了 content，即使您在接下来的迭代中添加了更多内容也是如此。结果，这将复制所有以前的文本节点。要解决此问题，请将 html() 调用移出循环。试试这个：

success: function(response) {
  var content = '';
  $.each(response.data, function(index, element) {
    content += 'id: ' + element.id + '<br />';
    content += 'name: ' + element.name + '<br />';
  });
  $('#output').html(content);
}

无法解析 Ajax Json

Unable to parse Ajax Json

ajax

jquery

twitch