调用两个ajax请求并在同一个div中附加两个请求

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应用程序中使用的变量名

我的最终Codepen 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*);