If-Anweisung mit dynamisch angehängten divs

Question

Ich habe einen API-Aufruf, der durch ein Array von Benutzern analysiert, während einige Elemente der JSON-Daten an Divs mit einer for-Schleife anhängen. Mein Problem ist, dass ich eine if-Anweisung innerhalb eines anderen API-Aufrufs geschachtelt habe, um nach dem Stream-Status zu suchen. Wenn stream null ist, sollte ein img angehängt werden und umgekehrt.

Das Problem ist, dass die if-Anweisung durch das Array von Benutzern zu analysieren scheint, aber dann alle Ergebnisse der Anweisung an jede Benutzerzeile anfügt. Ich versuche, die if-Anweisung einzeln auf jeden Benutzer im Array anzuwenden, und füge dann das richtige img an. Ich gehe davon aus, dass jedes dynamisch angehängte div dieselbe Klasse hat, auf die die if-Anweisung abzielt. Lass mich wissen, was ihr denkt.

$(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

Sie haben zwei Probleme mit Ihrem Code: Timing und Kontext für Ihre $('.status-symbol').append() Anrufe.

Die Art, wie Ihr Code geschrieben wird, funktioniert nicht einmal, wenn Ajax in der zweiten Schleife vor denen in der ersten Schleife aufruft. .getJSON ist asynchron, was bedeutet, dass die Verarbeitungszeit und die Reihenfolge ihrer Ausführung variabel ist. Sie müssen den Rückruf Ihrer if/else-Anweisung erst dann verarbeiten, wenn der getJSON-Aufruf für diesen Benutzer abgeschlossen ist.

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

hinzufügen Datenattribut data-user-id mit dem Benutzer, den Sie an den richtigen Benutzer anhängen helfen, gerade jetzt $('.status-symbol') Wähler anhängt allen prezent Status-Symbol Elemente

$(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">' 
      ) 
     } 
    }); 
} 
});