javascript - jquery twitch 直播 api 错误

Question

我正在尝试构建一个网络应用程序，向您显示哪些 twitch 用户在线，并允许您单击他们的名字，然后将您带到他们的 twitch 页面，我之前已经完成了此操作，但在尝试将 url 链接添加到他们的抽搐页面不再工作，我看不到我更改了什么。

    $(function(){
        users = ["ESL_SC2","OgamingSC2", "cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninja"];

        a = "https://api.twitch.tv/kraken/streams/"
        b = "https://api.twitch.tv/kraken/channels/";
        for(i = 0; i<users.length; i++){
            $.getJSON(a + users[i], function(data) {
                if(data.stream ==null){
                    status = "offline";
                    playing = "";
                    }
                else {
                    status = "online";
                    playing = data.stream.game;    
                }
            });

            x = b + users[i]
            $.getJSON(x, function(result) {   
                displayName = result.display_name;
                link= result.url;
            });
            $("#list").append("<a href='" + link + "'><div class='block'> <h3 class='heading'>" + displayName + "</h3><p class='offline_status'>"  + status + "</p><p>"+ playing + "</p></h3></div></a>");  
       }
    })

Answer 1

您没有在 Ajax 调用之前声明变量，因此变量在 ajax 调用之外未定义。

试试这个:

$(function(){

    jQuery.ajaxSetup({async:false});

    var users = ["ESL_SC2","OgamingSC2", "cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninja"];

    a = "https://api.twitch.tv/kraken/streams/"
    b = "https://api.twitch.tv/kraken/channels/";

    for(i = 0; i<users.length; i++){
        var displayName, status, playing, link;
        jQuery.get(a + users[i]).done(function(data) {
            if(data.stream == null){
                status = "offline";
                playing = "";
            }
            else {
                status = "online";
                playing = data.stream.game;    
            }

        });
        jQuery.get(b + users[i]).done(function(result) { 
            displayName = result.display_name;
            link= result.url;
            $("#list").append("<a href='" + link + "'><div class='block'> <h3 class='heading'>" + displayName + "</h3><p class='offline_status'>"  + status + "</p><p>"+ playing + "</p></div></a>");
        });
    }
});

编辑:您正在执行 AJAX 请求，但它们是异步的，因此代码将继续执行而无需等待响应。为了解决这个问题，我在开头指定我想要同步请求。为了确保请求得到良好执行并且数据可用，我使用了 .done() 并将函数放在那里。我希望你能理解你的一些错误:)(我已经学会了我的)。

JSFiddle:https://jsfiddle.net/vp8s99L2/