Tentando fazer 2 chamadas Ajax via JQuery e, em seguida, preceder os dados
Estou trabalhando no projeto da API do Freecodecamp Twitch e não consigo exibir os dados da API corretamente. O logotipo, canal e status retornam como indefinidos.
Eu sei que a API está funcionando definitivamente. Deve haver algo errado na maneira como escrevi no código, mas não consigo descobrir o que.
Aqui está o meu código:
$(document).ready(function() {
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
for (i=0; i<users.length; i++) {
var url="https://api.twitch.tv/kraken/channels/" + users[i];
var logo;
var channel;
var status;
$.ajax ({
type: 'GET',
url: url,
headers: {
'Client-ID': 'hw8qejm816w6tjk88fdhfjz1wxpypm'
},
success: function(data) {
logo = data.logo;
channel = data.name;
}
});
var url2 = "https://api.twitch.tv/kraken/streams/" + users[i];
$.ajax ({
type: 'GET',
url: url2,
headers: {
'Client-ID': 'hw8qejm816w6tjk88fdhfjz1wxpypm'
},
success: function(data2) {
if (data2.stream == null) {
status = "Offline";
} else {
status = "Online";
};
}
});
$("#channelInfo").prepend("<div class='row'><div class='col-xs-4'><img src="+logo+"></div><div class='col-xs-4'>"+channel+"</div><div class='col-xs-4'>"+status+"</div>")
};
});
Aqui está um link para o meu codepen:http://codepen.io/drhectapus/pen/VPNQJa?editors=1011
Qualquer ajuda seria muito apreciada.