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

Solution

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/