Javascript 调用两个ajax请求并在同一个div中追加这两个请求

这是我的项目，我正在使用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

或

---

没用，救命

这里有人回答了我的问题

答案是这样的

您遇到的问题是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应用程序，清晰易懂

我最后的密码笔

正确的代码

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*);

var拖缆=[“Thulz”、“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”、“habathcx”、“RobotCaleb”、“Noobs2nijas”、“Rakin”]；
因为（i=0；i这里有人回答了我的问题

答案是这样的

您遇到的问题是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应用程序，清晰易懂

我最后的密码笔

正确的代码

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*);

var拖缆=[“Thulz”、“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”、“habathcx”、“RobotCaleb”、“Noobs2nijas”、“Rakin”]；
对于（i=0；我等待第二个请求完成，然后再添加第一个请求中的数据。然后使用两个响应构建所需的html。我已经尝试了您的代码，它工作了，当然您添加了jQuery链接，对吗？这是代码笔，它怎么对我不起作用？不起作用，好吧……首先，我在第17行看到您使用了
$（“#”+拖缆[i]）.append（online.stream.channel.status）；
尝试将其更改为
$（“#”+streamer.append（online.stream.channel.status）；
同样的结果，我是否应该将每个对象存储在一个全局变量中，然后在循环结束之前构建下面两个对象的html？等待第二个请求完成，然后再添加第一个请求的数据。然后使用两个响应构建所需的html我已经尝试了你的代码，它可以工作了，当然你添加了jQuery链接，对吗？下面是codepen，它怎么对我不起作用？不起作用，好吧……首先，我看到在第17行我看到你使用了
$（“#”+streamer[I]）.append（online.stream.channel.status）；
尝试将它改为
$（“#”+streamer.append（online.stream.channel.status）；
相同的结果，我是否应该将每个对象存储在一个全局变量中，然后在循环结束之前在这两个对象下面构建html？