循环遍历 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`); 
          })
     })
})

然后我尝试根据另一个 AJAX 调用的结果在每个项目的 span 标记内附加“离线”

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

这是我的html

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

这样做的结果是它在每个列表项中附加了与 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');
          }
    });
  });

});

我将用户名添加为类而不是状态作为类名，稍后根据用户名进行更新。