Question

这是我的项目，我正在使用ajax请求

加载所有流

另一个获取在线信息流

因为所有API都没有关于在线和离线流的信息

所以我已成功加载了所有名称和徽标

的流

如果流在线，我想对流div进行更改（添加状态，将背景颜色更改为绿色）

这是我尝试过的事情

飘带阵列

var streamer = ["Thulz","ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas","Rakin"];

用于循环获取每个流光，首先是ajax用于获取每个流光并将它们分别放入div中，第二个是我在努力的地方

for(i=0;i<streamer.length;i++){
    $.ajax({
    url: "https://wind-bow.glitch.me/twitch-api/channels/"+streamer[i],
    success: function(response) {

    $("#result").append("<div class='row streams'><div class='col-12 imag'><img src='"+response.logo+"' alt='"+response.name+"' height='75' width='75'><div class='texts'>"+response.name+"<p id='"+response.name+"'></p></div></div></div>");          
}});//first AJAX

    $.ajax({//second ajax
    url: "https://wind-bow.glitch.me/twitch-api/streams/"+streamer[i],
    success: function(online) {
        if(online.stream !== null){
            console.log(online.stream.channel.status);
        }
    }//response success
            });

}//streamer for loop

我尝试了什么：

为每个流媒体提供唯一的#id，然后附加状态并对第二个请求获得的流媒体执行css更改

$("#"+streamer[i]).append(online.stream.channel.status);

或

var sname= online.stream.channel.name;
$("#"+sname).append(online.stream.channel.status);

没有工作，帮助！

Answer 1

有人在这里回答了我的问题https://forum.freecodecamp.org/t/twitch-api-project-issue/139229/2

这里是答案

您遇到的问题是AJAX中的第一个A.虽然你是对API进行异步调用并等待响应，你的循环只是继续，没有任何设置来保存数据到达。您需要做的是存储AJAX调用的结果在变量中，当两个变量都成功获得它们时数据，用这些数据做点什么：
var a = $.ajax({ . . . }); //first AJAX
var b = $.ajax({ . . . }); //second AJAX

$.when(a, b).done(function(channelData, streamData) { . . . });
$ .when（）。done（）将跟踪每个的a和b变量在循环中调用，只有在两者都到达时才进行。刚刚放你的append（）代码在那里，看看是否有诀窍。也， channelData和streamData分别只是指a和b。您不必使用那些变量名称，这正是我用于我的为清晰起见，Twitch app

我的最终代码https://codepen.io/Krimlen/pen/rzejdV

正确的代码

var streamer = ["Thulz","ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas","Rakin"];
for(i=0;i<streamer.length;i++){
var firstAjax = $.ajax({
url: "https://wind-bow.glitch.me/twitch-api/channels/"+streamer[i]});//first AJAX
var secondAjax = $.ajax({//second ajax
url: "https://wind-bow.glitch.me/twitch-api/streams/"+streamer[i]
});
$.when(firstAjax, secondAjax).done(function(channel, live) {

$("#result").append(*acess both ajax results here by the names channel and live and append them*);

调用两个ajax请求并在同一个div中追加它们

1 个答案: