Question

我试图遍历一个附加了从AJAX调用收到的数据的列表。

基本上，我做了一个AJAX调用并使用循环将数据附加到DOM中的list元素。

 for(int x=0;x<s1.length;x++)
{
  System.out.println(s1[x]);
}

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

     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

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

这样做的结果是它将“离线”和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');
          }
    });
  });

});

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

循环遍历AJAX附加列表

1 个答案: