For循環運行數組的長度，但顯示一個元素array.length時間

Question

我正在爲freeCodeCamp項目工作，我正在通過twitch.tv用戶數組運行for循環。我創建了一個表，併爲我的數組中的每個用戶名，它應該添加新行，填充數據，並移動到下一個元素。問題是每次運行代碼時，它似乎都是在數組中選擇一個隨機索引，並運行循環以等於數組中元素的數量。我認爲這是一個顯示問題，因爲它連接到每個單獨通話的服務器。

希望有人能幫助我。

var twitch = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas', 'ESL_LOL', 'wow_2', 'brunofin', 'comster404'] 
 

 
var streams = 'https://wind-bow.gomix.me/twitch-api/streams/'; 
 
var channels = 'https://wind-bow.gomix.me/twitch-api/channels/'; 
 
var users = 'https://wind-bow.gomix.me/twitch-api/users/'; 
 

 

 
var getStream = function(data) { 
 

 
    if (data.stream === null) { 
 
    $('.status').append('Offline'); 
 
    } else { 
 
    var streamStatus = data.stream.channel.status; 
 
    var html = '<td class="stream">' + streamStatus + '</td>'; 
 
    $('.stream').html(html); 
 
    } 
 

 
} 
 
var getChannels = function(data) { 
 
    var game = data.display_name; 
 

 
    var logoHtml = data.logo; 
 
    var channelUrl = data.url; 
 
    var gameHtml = '<a href=' + channelUrl + ' target="_blank">' + game + '</a>'; 
 
    var logoHtml = '<img class="image" src="' + logoHtml + '">'; 
 
    
 
    $('.game').html(gameHtml); 
 
    $('.logo').html(logoHtml); 
 

 
} 
 

 

 
$(document).ready(function() { 
 

 
    $('.choice').on('click', function() { 
 
    $('.choice').removeClass('selected'); 
 
    $(this).toggleClass('selected'); 
 
    }); 
 

 
    var table = $('<table id="twitch-table"></table>').appendTo('#content'); 
 

 
    for (var i = 0; i < twitch.length; i++) { 
 
    var row = $('<tr></tr>').appendTo(table); 
 
    $('<td class="logo"></td>').appendTo(row); 
 
    $('<td class="game"></td>').appendTo(row); 
 
    $('<td class="stream"></td>').appendTo(row); 
 

 
    $.getJSON(streams + twitch[i], getStream, 'jsonp'); 
 
    $.getJSON(channels + twitch[i], getChannels, 'jsonp'); 
 

 

 

 
    } 
 

 
});

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 100%; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
#main { 
 
    width: 600px; 
 
    margin: 2% auto 0; 
 
} 
 

 
#header { 
 
    padding: 0; 
 
    margin: 0; 
 
    background: #116466; 
 
    color: #d1e8e2; 
 
    line-height: 100px; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    margin: 0 0 0 5%; 
 
    font-size: 300%; 
 
} 
 

 
#row { 
 
    background: #285277; 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.choice { 
 
    position: relative; 
 
    text-align: center; 
 
    width: 33%; 
 
    background: #285277; 
 
    padding: 5px 10px; 
 
    display: inline-block; 
 
    color: #d1e8e2; 
 
    font-size: 150%; 
 
} 
 

 
.choice a { 
 
    /*padding: 5px 20px;*/ 
 
    color: #d1e8e2; 
 
} 
 

 
#content { 
 
    width: 100%; 
 
    background: #efefef; 
 
} 
 

 

 
/* 
 
.choice a:active { 
 
\t background: #1E3D59; 
 
} 
 
*/ 
 

 
.selected { 
 
    background: #1E3D59; 
 
} 
 

 
.selected:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 45%; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: solid 10px #1E3D59; 
 
    border-left: solid 10px transparent; 
 
    border-right: solid 10px transparent; 
 
} 
 

 
table { 
 
    width: 600px; 
 
} 
 

 
tr { 
 
    margin: 5px 0; 
 
    display: flex; 
 
    width: 100%; 
 
    justify-content: space-between; 
 
} 
 

 
td { 
 
    border-collapse: collapse; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
.game { 
 
    padding-left: 10px; 
 
    width: 100px; 
 
    font-size: 120%; 
 
    line-height: 75px; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.game a { 
 
    color: #111; 
 
} 
 

 
.image { 
 
    height: 75px; 
 
    width: 75px; 
 
} 
 

 
.logo { 
 
    padding: 3px 5px; 
 
    box-sizing: border-box; 
 
} 
 

 
.stream { 
 
    padding-right: 10px; 
 
    width: 350px; 
 
    display: inline-block; 
 
    text-overflow: ellipsis; 
 
    line-height: 75px; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <title>Twitch.tv JSON API</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
 
    <script src="https://use.fontawesome.com/57c9bf8971.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id='main'> 
 
    <header id='header'> 
 
     <h1>Twitch Streamers</h1> 
 
    </header> 
 
    <div id='row'> 
 
     <ul> 
 
     <li class='choice selected'><a href='#'>All</a></li> 
 
     <li class='choice'><a href='#'>Online</a></li> 
 
     <li class='choice'><a href='#'>Offline</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id='content'> 
 

 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 1

的問題是在這些線路：

$('.game').html(gameHtml); 
$('.logo').html(logoHtml); 
$('.stream').html(html); 

他們選擇與game類（或logo或stream）所有線路和改變他們。

請參閱here固定JSfiddle。

Answer 2

您需要正確使用回調函數。您的getStreams和getChannels函數將數據應用於所有行，而不是其各自的行。

下面是修改後的回調函數聲明：

var getStream = function(url, idx) { 
    $.getJSON(url, function(data){ 
     if (data.stream === null) { 
      $('.status').append('Offline'); 
     } else { 
      var streamStatus = data.stream.channel.status; 
      var html = '<td class="stream">' + streamStatus + '</td>'; 
      $('tr').eq(idx).find('.stream').html(html); 
     } 
    }); 
} 

var getChannels = function(url, idx) { 
    $.getJSON(url, function(data){ 
     var game = data.display_name; 
     var logoHtml = data.logo; 
     var channelUrl = data.url; 
     var gameHtml = '<a href=' + channelUrl + ' target="_blank">' + game + '</a>'; 
     var logoHtml = '<img class="image" src="' + logoHtml + '">'; 

     $('tr').eq(idx).find('.game').html(gameHtml); 
     $('tr').eq(idx).find('.logo').html(logoHtml); 
    }); 
} 

而且，你for循環中稱他們爲：

getStream(streams + twitch[i], i); 
getChannels(channels + twitch[i], i); 

的jsfiddle供大家參考：https://jsfiddle.net/yogesh214/yxLu9mwg/4/

Answer 3

我理解您的問題現在：

作爲@ Shalom Peles說，你使用$('.stream')來選擇全部文檔中類.stream中的元素，而不僅僅是行中的元素。

改爲使用.find在元素中進行選擇。例如：

let row = $('<div class="my-row"></div>'); // creates a row 
row.append(/* ... */); 
let elementInsideRow = row.find('.my-column'); // this selects an element *inside* the row element. 

另外：use let instead of var所有聲明

---

我編輯你的代碼爲流工作。對頻道也一樣。閱讀評論。

var twitch = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas', 'ESL_LOL', 'wow_2', 'brunofin', 'comster404'] 
 

 
var streams = 'https://wind-bow.gomix.me/twitch-api/streams/'; 
 
var channels = 'https://wind-bow.gomix.me/twitch-api/channels/'; 
 
var users = 'https://wind-bow.gomix.me/twitch-api/users/'; 
 

 
// refactor this like I did below 
 
var getChannels = function(data) { 
 
    var game = data.display_name; 
 

 
    var logoHtml = data.logo; 
 
    var channelUrl = data.url; 
 
    var gameHtml = '<a href=' + channelUrl + ' target="_blank">' + game + '</a>'; 
 
    var logoHtml = '<img class="image" src="' + logoHtml + '">'; 
 
    
 
    $('.game').html(gameHtml); 
 
    $('.logo').html(logoHtml); 
 

 
} 
 

 

 
$(document).ready(function() { 
 

 
    $('.choice').on('click', function() { 
 
    $('.choice').removeClass('selected'); 
 
    $(this).toggleClass('selected'); 
 
    }); 
 

 
    var table = $('<table id="twitch-table"></table>').appendTo('#content'); 
 

 
    // you need to use `let` here because you need block scope 
 
    // in general, use `let` instead of `var` everywhere. 
 
    // https://stackoverflow.com/questions/21906133/when-should-i-use-let-and-var 
 
    for (let i = 0; i < twitch.length; i++) { 
 
    let row = $('<tr></tr>'); 
 
    $.getJSON(streams + twitch[i], function(data) { 
 
     
 
     $('<td class="logo"></td>').appendTo(row); 
 
     $('<td class="game"></td>').appendTo(row); 
 
     $('<td class="stream"></td>').appendTo(row); 
 
     if (data.stream === null) { 
 
      // instead of selecting all the elements with `.status`, use `find` to select *within* the `row` element 
 
      // $('.status').append('Offline'); 
 
      row.find('.status').append('Offline'); 
 
     } else { 
 
      var streamStatus = data.stream.channel.status; 
 
      var html = '<td class="stream">' + streamStatus + '</td>'; 
 
      row.find('.stream').html(html); 
 
     } 
 
     // apend it when you're done 
 
     row.appendTo(table); 
 
    }, 'jsonp'); 
 

 
    // make the same changes for channel 
 
    //$.getJSON(channels + twitch[i], getChannels, 'jsonp'); 
 

 

 

 
    } 
 

 
});

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 100%; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
#main { 
 
    width: 600px; 
 
    margin: 2% auto 0; 
 
} 
 

 
#header { 
 
    padding: 0; 
 
    margin: 0; 
 
    background: #116466; 
 
    color: #d1e8e2; 
 
    line-height: 100px; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    margin: 0 0 0 5%; 
 
    font-size: 300%; 
 
} 
 

 
#row { 
 
    background: #285277; 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.choice { 
 
    position: relative; 
 
    text-align: center; 
 
    width: 33%; 
 
    background: #285277; 
 
    padding: 5px 10px; 
 
    display: inline-block; 
 
    color: #d1e8e2; 
 
    font-size: 150%; 
 
} 
 

 
.choice a { 
 
    /*padding: 5px 20px;*/ 
 
    color: #d1e8e2; 
 
} 
 

 
#content { 
 
    width: 100%; 
 
    background: #efefef; 
 
} 
 

 

 
/* 
 
.choice a:active { 
 
\t background: #1E3D59; 
 
} 
 
*/ 
 

 
.selected { 
 
    background: #1E3D59; 
 
} 
 

 
.selected:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 45%; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: solid 10px #1E3D59; 
 
    border-left: solid 10px transparent; 
 
    border-right: solid 10px transparent; 
 
} 
 

 
table { 
 
    width: 600px; 
 
} 
 

 
tr { 
 
    margin: 5px 0; 
 
    display: flex; 
 
    width: 100%; 
 
    justify-content: space-between; 
 
} 
 

 
td { 
 
    border-collapse: collapse; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
.game { 
 
    padding-left: 10px; 
 
    width: 100px; 
 
    font-size: 120%; 
 
    line-height: 75px; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.game a { 
 
    color: #111; 
 
} 
 

 
.image { 
 
    height: 75px; 
 
    width: 75px; 
 
} 
 

 
.logo { 
 
    padding: 3px 5px; 
 
    box-sizing: border-box; 
 
} 
 

 
.stream { 
 
    padding-right: 10px; 
 
    width: 350px; 
 
    display: inline-block; 
 
    text-overflow: ellipsis; 
 
    line-height: 75px; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <title>Twitch.tv JSON API</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
 
    <script src="https://use.fontawesome.com/57c9bf8971.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id='main'> 
 
    <header id='header'> 
 
     <h1>Twitch Streamers</h1> 
 
    </header> 
 
    <div id='row'> 
 
     <ul> 
 
     <li class='choice selected'><a href='#'>All</a></li> 
 
     <li class='choice'><a href='#'>Online</a></li> 
 
     <li class='choice'><a href='#'>Offline</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id='content'> 
 

 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>