TV JSON API问题

Question

因此，我尝试使用twitch：https://codepen.io/sterg/pen/yJmzrN。

如果您检查我的代码页，您会发现每次我刷新页面时，状态顺序都会发生变化，我不知道为什么会发生这种情况。这是我的javascript：

$(document).ready(function(){
    var ur="";
    var tw=["freecodecamp","nightblue3","imaqtpie","bunnyfufuu","mushisgosu","tsm_dyrus","esl_sc2"];
    var j=0;
    for(var i=0;i<tw.length;i++){   
        ur="https://api.twitch.tv/kraken/streams/"+tw[i];

        $.getJSON(ur,function(json) {

            $(".tst").append(JSON.stringify(json));
            $(".name").append("<li> <a href="+"https://www.twitch.tv/"+tw[j]+">"+tw[j]+"</a><p>"+""+"</p></li>");

            if(json.stream==null){
                $(".stat").append("<li>"+"Offline"+"</li>");

            }
            else{
                $(".stat").append("<li>"+json.stream.game+"</li>"); 

            }
            j++;
    })

    }


});

Answer 1

$.getJSON()异步工作。在返回结果之前不会返回JSON。API可以以与发出的请求不同的顺序返回，因此您必须处理这个问题。

实现这一目标的一种方法是使用允诺API和$.when()一起将所有请求捆绑为一个大的承诺，这将作为一个整体成功或失败。这还确保响应数据按预期顺序返回给您的代码。

试试这个：

var channelIds = ['freecodecamp', 'nightblue3', 'imaqtpie', 'bunnyfufuu', 'mushisgosu', 'tsm_dyrus', 'esl_sc2'];
$(function () {
  $.when.apply(
    $, 
    $.map(channelIds, function (channelId) {
      return $.getJSON(
        'https://api.twitch.tv/kraken/streams/' + encodeURIComponent(channelId)
      ).then(function (res) {
        return {
          channelId: channelId,
          stream: res.stream
        }
      });
    })
  ).then(function () {
    console.log(arguments);
    var $playersBody = $('table.players tbody');
    $.each(arguments, function (index, data) {
      $playersBody.append(
        $('<tr>').append([
          $('<td>'),
          $('<td>').append(
            $('<a>')
              .text(data.channelId)
              .attr('href', 'https://www.twitch.tv/' + encodeURIComponent(data.channelId))
          ),
          $('<td>').text(data.stream ? data.stream.game : 'Offline')
        ])
      )
    })
  })
});

https://codepen.io/anon/pen/KrOxwo

在这里，我使用$.when.apply()与数组一起使用$.when，而不是使用参数列表。接下来，我使用$.map()将通道ID数组转换为每个ID的承诺数组。在此之后，我有一个简单的助手函数，它处理正常响应(res)，提取相关的流数据，同时附加channelId供以后使用。(如果没有这种情况，我们必须返回原始数组才能获得ID。您可以这样做，但在我看来，这不是最佳实践。我更喜欢将数据保存在响应中，这样以后重构就不太可能破坏某些内容。这是优先考虑的问题。)

接下来，我有一个.then()处理程序，它接收所有数据并循环它们。这些数据作为参数返回给函数，所以我只需使用$.each()来迭代每个参数，而不必将它们命名出来。

我在处理HTML的方式上也做了一些改变。您将注意到，我使用$.text()和$.attr()来设置动态值。这确保了HTML是有效的(因为您实际上根本没有对动态位使用HTML )。否则，可能有人有<script src="somethingEvil.js"></script>的用户名，并且它会在您的页面上运行。这完全避免了这个问题。

Answer 2

看起来，每次刷新时，您都会使用j计数器变量，以相同的顺序追加“显示名称”。

但是，当每个请求返回时，您都会附加“状态”。由于这些HTTP请求是异步的，所以每次重新加载页面时，它们被追加到文档的顺序都会有所不同。

如果希望状态保持相同的顺序(匹配显示名称的顺序)，则需要在每个API调用返回时存储响应数据，并在将其附加到正文之前自己对其进行排序。

Answer 3

起初，我将最后一个else条件(打印出流媒体游戏的条件)改为$(".stat").append("<li>"+jtw[j]+": "+json.stream.game+"</li>"); --它的含义与您试图实现的目标相同，但产生了相同的错误。

在您创建的列表和您收到的数据中存在差异。与它们没有直接关联。

这是使用$(".stat").append("<li>"+json.stream._links.self+": "+json.stream.game+"</li>");的首选方式，在最坏的情况下，您甚至可以使用regex或substr获取用户名。

只要您不运行用于上载列"DisplayName“和"Status”的单独循环，您甚至可以将它们分开，以防您不想像我的示例那样将它们写入同一行。

无论您选择哪种方式，问题在于“状态”列的上传顺序与您在“状态名称”中所做的不完全相同。