はajaxコールで正しいインデックス結果を得ることができません

Question

変数 'showers'で 'streamers'配列を繰り返し処理しようとしましたが、失敗しました。配列の最初の要素 "monstercat"と最後の要素 "amazhs" 、displayResult関数でのクロムとshowindexのデバッグを使用すると、常に0と9ですが、なぜ、どのような助けを見つけることができないのですか？ありがとう！

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs']; 
 
$(document).ready(function() { 
 
    var logo = ""; 
 
    var channelName = ""; 
 
    var showindex = 0; 
 

 
    streamers.forEach(function(streamer, index) { 
 
    showindex = index; 
 
    $.ajax({ 
 
     type: 'GET', 
 
     jsonp: "callback", 
 
     url: 'https://api.twitch.tv/kraken/streams/' + streamer, 
 
     headers: { 
 
     'Client-ID': 'd50b88uvtwlhdfrqi3vj3k1hm3izkyx' 
 
     }, 
 
     success: displayResult 
 
    }); 
 
    }); 
 

 
    function displayResult(data) { 
 
    var outstring = ""; 
 
    if (data.stream !== null) { 
 
     channelName = data.stream.channel.display_name; 
 
     logo = data.stream.channel.logo; 
 
    } else { 
 
     logo = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50"; 
 
     channelName = streamers[showindex]; 
 
    } 
 
    outstring += 
 
     "<li class='streamer'>" + 
 
     "<img class='streamer-icon' src='" + logo + "'/>" + 
 
     "<p class='streamer-name'>" + 
 
     "<a href='http://twitch.tv/" + channelName + "' target='_blank'>" + channelName + "</a></p>" + 
 
     "<span class='streamer-status'>" + 
 
     "<i class='fa fa-exclamation'></i></span></li>" 
 
    $("#showBox").append(outstring); 
 
    } 
 
});

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.tab-content { 
 
    border: 1px solid #ddd; 
 
    border-top: none; 
 
} 
 

 
.streamer { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 

 
.streamer-icon { 
 
    width: 50px; 
 
} 
 

 
.streamer-name { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
} 
 

 
.streamer-status { 
 
    float: right; 
 
    padding-top: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row col-md-4 col-md-offset-4"> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
     <li class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a> 
 
     </li> 
 
     <li><a href="#online" aria-controls="online" role="tab" data-toggle="tab">online</a> 
 
     </li> 
 
     <li><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">offline</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane active" id="all"> 
 
     <ul id="showBox"> 
 
     </ul> 
 
     </div> 
 
     <div class="tab-pane" id="online"> 
 
     <ul></ul> 
 
     </div> 
 
     <div class="tab-pane" id="offline"> 
 
     <ul></ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

これは、呼び出しがすべて同時に起こっているので、そうすぐに方法この問題を回避= 9をshowindexだ、それはまだ間違って行くことができる（しかし、それはだけれどもdisplayResultに増分を行うことであろう可能性が低い）。

おそらくコードを完全に変更して、より安全な約束をすることができます。

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs']; 
 
$(document).ready(function() { 
 
    var logo = ""; 
 
    var channelName = ""; 
 
    var showindex = 0; 
 

 
    streamers.forEach(function(streamer, index) { 
 
    $.ajax({ 
 
     type: 'GET', 
 
     jsonp: "callback", 
 
     url: 'https://api.twitch.tv/kraken/streams/' + streamer, 
 
     headers: { 
 
     'Client-ID': 'd50b88uvtwlhdfrqi3vj3k1hm3izkyx' 
 
     }, 
 
     success: displayResult 
 
    }); 
 
    }); 
 

 
    function displayResult(data) { 
 
    var outstring = ""; 
 
    if (data.stream !== null) { 
 
     channelName = data.stream.channel.display_name; 
 
     logo = data.stream.channel.logo; 
 
    } else { 
 
     logo = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50"; 
 
     channelName = streamers[showindex]; 
 
    } 
 
    outstring += 
 
     "<li class='streamer'>" + 
 
     "<img class='streamer-icon' src='" + logo + "'/>" + 
 
     "<p class='streamer-name'>" + 
 
     "<a href='http://twitch.tv/" + channelName + "' target='_blank'>" + channelName + "</a></p>" + 
 
     "<span class='streamer-status'>" + 
 
     "<i class='fa fa-exclamation'></i></span></li>" 
 
    $("#showBox").append(outstring); 
 
    showindex++; 
 
    } 
 
});

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.tab-content { 
 
    border: 1px solid #ddd; 
 
    border-top: none; 
 
} 
 
.streamer { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 
.streamer-icon { 
 
    width: 50px; 
 
} 
 
.streamer-name { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
} 
 
.streamer-status { 
 
    float: right; 
 
    padding-top: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row col-md-4 col-md-offset-4"> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
     <li class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a> 
 
     </li> 
 
     <li><a href="#online" aria-controls="online" role="tab" data-toggle="tab">online</a> 
 
     </li> 
 
     <li><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">offline</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane active" id="all"> 
 
     <ul id="showBox"> 
 
     </ul> 
 
     </div> 
 
     <div class="tab-pane" id="online"> 
 
     <ul></ul> 
 
     </div> 
 
     <div class="tab-pane" id="offline"> 
 
     <ul></ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ここでは、配列を別の方法をforeachのが、繰り返し処理を使用していない、それを行うための別の方法です。この方法では、

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs']; 
 
$(document).ready(function() { 
 
    var logo = ""; 
 
    var channelName = ""; 
 
    var showindex = 0; 
 

 
    //Work out if there are any streamers left in the array 
 
    function calcStreamers() { 
 
    if (showindex < (streamers.length - 1)) { 
 
     //if there are add 1 and go get it 
 
     showindex++; 
 
     streamersGet(); 
 
    } else { 
 
     //if not just stop 
 
     return false 
 
    } 
 
    }; 
 

 
    //The get function 
 
    function streamersGet() { 
 
    $.ajax({ 
 
     type: 'GET', 
 
     jsonp: "callback", 
 
     url: 'https://api.twitch.tv/kraken/streams/' + streamers[showindex], 
 
     headers: { 
 
     'Client-ID': 'd50b88uvtwlhdfrqi3vj3k1hm3izkyx' 
 
     }, 
 
     success: displayResult 
 
    }); 
 
    }; 
 

 
    function displayResult(data) { 
 
    var outstring = ""; 
 
    if (data.stream !== null) { 
 
     channelName = data.stream.channel.display_name; 
 
     logo = data.stream.channel.logo; 
 
    } else { 
 
     logo = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50"; 
 
     channelName = streamers[showindex]; 
 
    } 
 
    outstring += 
 
     "<li class='streamer'>" + 
 
     "<img class='streamer-icon' src='" + logo + "'/>" + 
 
     "<p class='streamer-name'>" + 
 
     "<a href='http://twitch.tv/" + channelName + "' target='_blank'>" + channelName + "</a></p>" + 
 
     "<span class='streamer-status'>" + 
 
     "<i class='fa fa-exclamation'></i></span></li>" 
 
    $("#showBox").append(outstring); 
 
    //Once the data has been added to the page go and check if there are more to add 
 
    calcStreamers(); 
 
    } 
 
    //Initally start by getting the first result 
 
    streamersGet(); 
 
});

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.tab-content { 
 
    border: 1px solid #ddd; 
 
    border-top: none; 
 
} 
 
.streamer { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 
.streamer-icon { 
 
    width: 50px; 
 
} 
 
.streamer-name { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
} 
 
.streamer-status { 
 
    float: right; 
 
    padding-top: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row col-md-4 col-md-offset-4"> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
     <li class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a> 
 
     </li> 
 
     <li><a href="#online" aria-controls="online" role="tab" data-toggle="tab">online</a> 
 
     </li> 
 
     <li><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">offline</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane active" id="all"> 
 
     <ul id="showBox"> 
 
     </ul> 
 
     </div> 
 
     <div class="tab-pane" id="online"> 
 
     <ul></ul> 
 
     </div> 
 
     <div class="tab-pane" id="offline"> 
 
     <ul></ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたは正しい配列を反復処理したいですか？

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs']; 
 
     $(document).ready(function() { 
 
      $(streamers).each(function(index, streamer){ 
 
      console.log(streamer+" "+index); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>