brad brad - 4 months ago 29
jQuery Question

jquery twitch live stream api bug

I am trying to build a web application that shows you which twitch users are online and allows you to click on their name and will take you to their twitch page, I had this working previously but after trying to add the url link to their twitch page is no longer working, and I can't see what i have changed.

$(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

You're not declaring variables before Ajax calls, so variables are undefined outside the ajax call.

Try this :

$(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>");
        });
    }
});

EDIT : You're doing AJAX request, but they're asynchronous, so the code will continue without waiting for the response. In order to fix that, here I specified at the beginning that I want synchronous requests. To be sure that the request is well executed and the data is available, I used .done(), and put the function in there. I hope you understand some of your mistakes :) (I've learned mine).

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

Comments