Question

var name, logo, streaming,twitchfeed;
var users = ["freecodecamp", "medrybw", "geoffstorbeck",
"terakilobyte", "habathcx", "robotCaleb",
"thomasballinger", "noobs2ninjas", "beohoff","boonyzarc"
];

function getInfo(){

 users.forEach(function(user) {
  var channelURL = 'https://api.twitch.tv/kraken/channels/' + user + '?callback=?';
  var streamURL = 'https://api.twitch.tv/kraken/streams/' + user + '?callback=?';

$.getJSON(channelURL, function(channel) {
$.getJSON(streamURL, function(stream) {
  if (stream.stream === null) {
    streaming = '<span class="label label-danger pull-right label-rawle offline"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></span>';
  } else {
    streaming = '<span class="label label-success pull-right label-rawle online"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></span>';
  }
  twitchfeed = channel.url;
  console.log(twitchfeed);
  name = channel.display_name;

  if (channel.logo === null) {
    channel.logo = 'https://c1.staticflickr.com/1/186/382004453_f4b2772254.jpg';
  }
  logo = '<img src="' + channel.logo + '" class="logo">';

  $('#person').append('<div class="user" id="' + name + '">');
  $('#' + name).append(logo + '<a href="'+twitchfeed+'" TARGET="_blank">' + '<span class="name">' + name + '</span>' + '</a>' + '</div>' + streaming);
  $('#' + name).append('<div class="topic">' + stream.stream.channel.status + '</div>');
});


 // what happens when tabs are clicked
$(function() {

  // 'all' tab
  $('#all').click(function() {

    $('#all').addClass('active');
    $('#online').removeClass('active');
    $('#offline').removeClass('active');

    $(".user").show();
  });
});

// 'online' tab
$('#online').click(function() {

  $('#all').removeClass('active');
  $('#online').addClass('active');
  $('#offline').removeClass('active');

  $(".user").each(function() {
    if ($(this).children(".offline").length < 1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

// 'offline' tab
$('#offline').click(function() {
  $('#all').removeClass('active');
  $('#online').removeClass('active');
  $('#offline').addClass('active');

  $(".user").each(function() {
    if ($(this).children(".offline").length < 1) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
 });
});
});


}

//Trying to add a user
/*$('#submit-rawle-button').click(function(){
var $newUser = $('#newUser').val();
if(users.indexOf($newUser)==-1)
  {
    users.push($newUser);
  }
getInfo();
});*/

getInfo();

我是使用JSON和jquery $ .getJSON函数的新手。如果我从getInfo函数中提取所有代码并且只调用一次我没有问题。但也许这是我缺乏理解，但我想如果我把所有这些都放到一个功能中。然后，我可以在将新用户添加到用户数组后添加一个按钮。我可以再次调用getInfo函数，它会给我一个新的JSON对象，使用添加的新用户进行更新。但是，我只是回到空对象。有人会向我解释为什么getInfo不能被多次调用，或者我的编码错误是不能更新JSON对象。

Answer 1

users.forEach不等待ajax调用完成。我认为术语是AJAX是异步的，forEach是同步的。

每次使用ajax时都要记住这一点。我稍微更改了代码，以便在第二个getJSON完成后不会尝试转到下一个用户UNTIL。必须有一种更优雅的方式来做到这一点。我还建议您查看promises它将来会派上用场。希望这会有所帮助。

userid

不止一次调用.getJSON

1 个答案: