如果語句與動態追加div

Question

我有一個API調用是解析通過用戶數組，同時將一些JSON數據的元素附加到for循環與div。我的問題是，我有一個嵌套在另一個API調用檢查流狀態的if語句。如果stream爲空，它應該附加一個img，反之亦然。

問題是，if語句似乎通過用戶數組解析，但隨後將語句的所有結果附加到每個用戶行。我試圖將if語句分別應用於數組中的每個用戶，然後附加正確的img。我假設問題是，每個動態附加div具有相同的類是由if語句的目標。讓我知道你們的想法。

$(document).ready(function() { 
 
    var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 
 

 
    for (var i = 0; i < users.length; i++) { 
 

 
    // channel call for info, name, logo 
 
    $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + users[i] + '?callback=?', function(datax) { 
 
     console.log(datax); 
 
     $('#streams-list').append(
 
     '<div class="row">' + 
 
     '<div class="col-md-1">' + 
 
     '<img src=' + datax.logo + ' class="stream-icon">' + 
 
     '</div>' + 
 
     '<div class="col-md-9 stream-row">' + 
 
     '<li class="list-group-item stream-list">' + datax.name + '</li>' + 
 
     '</div>' + 
 
     '<div class="col-md-1">' + 
 
     '<li class="list-group-item status-row"></li>' + 
 
     '</div>' + 
 
     '<div class="list-group-item col-md-1 icon-shell status-symbol" >' + 
 
     '</div>' + 
 
     '</div>' 
 
    ); 
 
    }); 
 
    } 
 
    var online = []; 
 
    var offline = []; 
 

 
    for (var x = 0; x < users.length; x++) { 
 
    // stream call for status 
 
    $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + users[x] + '?callback=?', function(data) { 
 
     var status = data.stream; 
 
     console.log(status); 
 
     if (status == null) { 
 
     $('.status-symbol').append(
 
      '<img src="icons/ic_highlight_off_black_48dp_2x.png" class="status">' 
 
     ) 
 
     } else { 
 
     $('.status-symbol').append(
 
      '<img src="icons/ic_done_black_48dp_2x.png" class="status">' 
 
     ) 
 
     } 
 
    }); 
 
    } 
 
});

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

Answer 1

您的代碼有兩個問題：您的$('.status-symbol').append()調用的時間和環境。

你的代碼寫入的方式，如果任何Ajax調用第一個循環中的第二個循環之前的第二個循環，它將不會工作。 .getJSON是異步的，這意味着處理時間和它們的執行順序是可變的。只有在該用戶的getJSON調用完成後，您才需要處理您的if/else語句回調。

function logStatus(data, $row) { 
    var status = data.stream; 
    console.log(status); 
    if (status == null) { 
    $row.find('.status-symbol').append(
     '<img src="icons/ic_highlight_off_black_48dp_2x.png" class="status">' 
    ) 
    } else { 
    $(row).find('.status-symbol').append(
     '<img src="icons/ic_done_black_48dp_2x.png" class="status">' 
    ) 
    } 
} 

for (var i = 0; i < users.length; i++) { 
    (function(user) { //use a self-invoking function to protect the reference to user 
    $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + user + '?callback=?', function(datax) { 
     var $row = $(
     '<div class="row">' + 
     '<div class="col-md-1">' + 
     '<img src=' + datax.logo + ' class="stream-icon">' + 
     '</div>' + 
     '<div class="col-md-9 stream-row">' + 
     '<li class="list-group-item stream-list">' + datax.name + '</li>' + 
     '</div>' + 
     '<div class="col-md-1">' + 
     '<li class="list-group-item status-row"></li>' + 
     '</div>' + 
     '<div class="list-group-item col-md-1 icon-shell status-symbol" >' + 
     '</div>' + 
     '</div>' 
    ).appendTo('#streams-list'); 
     $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + user + '?callback=?', function(data) { 
     logStatus(data,$row); 
     }); 
    }); 
    })(users[i]); 
} 

Answer 2

添加數據屬性data-user-id與用戶，這將有助於你追加到正確的用戶，現在$('.status-symbol')選擇追加到所有prezent狀態符號元素

$(document).ready(function() { 
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 

for (var i = 0; i < users.length; i++) { 

    // channel call for info, name, logo 
    $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + users[i] + '?callback=?', function (datax) { 
     console.log(datax); 
     $('#streams-list').append(
      '<div class="row">' + 
      '<div class="col-md-1">' + 
      '<img src=' + datax.logo + ' class="stream-icon">' + 
      '</div>' + 
      '<div class="col-md-9 stream-row">' + 
      '<li class="list-group-item stream-list">' + datax.name + '</li>' + 
      '</div>' + 
       '<div class="col-md-1">' + 
       '<li class="list-group-item status-row"></li>' + 
      '</div>' + 
      '<div data-user-id="'+ i +'" class="list-group-item col-md-1 icon-shell status-symbol" >' + 
      '</div>' + 
      '</div>' 
     ); 
    }); 
} 
var online = []; 
var offline = []; 

for (var x = 0; x < users.length; x++) { 
    // stream call for status 
    $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + users[x] + '?callback=?', function (data) { 
     var status = data.stream; 
     console.log(status); 
     if (status==null){ 
      $('.status-symbol[data-user-id="'+ users[i] +'"]').append(
       '<img src="icons/ic_highlight_off_black_48dp_2x.png" class="status">' 
      ) 
     } else { 
      $('.status-symbol[data-user-id="'+ i +'"]').append(
       '<img src="icons/ic_done_black_48dp_2x.png" class="status">' 
      ) 
     } 
    }); 
} 
});