AJAXをループして追加したリスト

Question

これは、AJAX呼び出しから受信したデータが追加されたリストをループしようとしています。

基本的に、私はAJAX呼び出しを行い、ループを使用してデータをDOMのリスト要素に追加しました。

 users.forEach(function(user){ 
    $.getJSON(channelUrl + user, function(data){ 
      //DECLARE ARRAYS 
      var channels = []; 
      //PUSH DATA TO ARRAYS 
      channels.push(data); 
      //APPEND DATA TO DOM 
      channels.forEach(function(channel){ 

       $('.stream-item').append(
         `<h3>`+ channel.display_name + `</h3> 
         <span class="status"></span`); 
      }) 
    }) 
}) 

そこで私は、これは私のhtml

<div id="stream-list-container"> 
     <ul id="stream-list"> 
      <li class="stream-item"> 
      stream item 
      </li> 
     </ul> 

ある別のAJAX呼び出し

​​

の結果に基づいて、各項目でのspanタグ内の "オフライン" を追加しようとしていますその結果、ajaxデータと同じくらい多くの「オフライン」がリストアイテムに追加されました。

ここにプロジェクト

http://codepen.io/kevinjanada/pen/MJZZmr?editors=1011

任意の助けをいただければ幸いです

へのリンク..

Answer 1

あなたは同じクラス名すなわち毎回のステータスを更新しようとしているので、ステータス値がために追加されますすべての利用可能なクラス。

users.forEach(function(user){ 
    $.getJSON(streamUrl + user, function(data){ 
      if(data.stream){ 
      $('.status').append('Offline') 
      } 
      else 
      $('.status').append('Online') 
    }) 
    }) 

代わりにステータススパンを追加するときに、IDを追加してユーザーのステータスを更新してください。

が親切

$(function(){ 

    //============================================== 
    //----------DECLARE USERS AND API URL----------- 
    //============================================== 

    const esl = 'ESL_SC2', 
     fcc = 'freecodecamp', 
     og = 'OgamingSC2', 
     cret = 'cretetion', 
     stor = 'storbeck', 
     hab = 'habathcx', 
     robo = 'RobotCaleb', 
     noob = 'noobs2ninjas' 

    const users  = [esl, fcc, og, cret, stor, hab, robo, noob]; 

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



    //============================================== 
    //-------------MAIN FUNCTION-------------------- 
    //============================================== 

    users.forEach(function(user){ 
    console.log(user); 
    $.getJSON(channelUrl + user, function(data){ 
      //DECLARE ARRAYS 
      var channels = []; 

      //PUSH DATA TO ARRAYS 
      channels.push(data); 
      //APPEND DATA TO DOM 
      channels.forEach(function(channel){ 
       //Check for the changes made 
       $('.stream-item').append(
         `<h3>`+ channel.display_name + `</h3><span class="`+user +`"></span>`); 
      }); 
    }); 
    }); 
    users.forEach(function(user){ 
    $.getJSON(streamUrl + user, function(data){ 
      if(data.stream){ 
      //Check for the changes made 
      $('.' + user).append('Offline'); 
      } 
      else { 
      //Check for the changes made 
      $('.' + user).append('Online'); 
      } 
    }); 
    }); 

}); 

以下のコードに作られた私の変更を参照してください、私はクラス名として代わりに状態のクラスとしてユーザー名を追加し、ユーザー名に基づいて、後でそれを更新します。