所以我正在为免费代码营制作这个twitch.tv api页面。 我试图遍历streamer数组并将数据推送到结果数组，按查看者排序并显示页面上结果数组的数据。
问题是当.append的东西在for循环中多次写入infor时。如果我将它移出for循环，变量是未定义的。
那些聪明人的想法是什么？
$(document).ready(function(){
getInfo();
var results = [];
function getInfo(){
var streamers = ["FreeCodeCamp","PlayHearthstone","summit1G","BradfordLee","Savjz","Z28RyanK"];
streamers.forEach(function(streamers){
$.getJSON('https://wind-bow.gomix.me/twitch-api/channels' + '/' + streamers + '?callback=?', function(data){
var name = data.display_name;
var game = data.game;
var logo = data.logo;
$.getJSON('https://wind-bow.gomix.me/twitch-api/streams' + '/' + streamers + '?callback=?', function(data){
var status = data.stream;
if(data.stream == undefined){
status = "Offline";
}else{
status = "Online";
}
var views = data.stream;
if(data.stream == undefined){
views = 0;
}else{
views = data.stream.viewers;
}
results.push({"name": name, "logo": logo, "status": status, "game": game, "views": views});
results.sort(function(b, a) {return parseFloat(a.views) -parseFloat(b.views);});
console.log(results);
results.forEach(function(results){
$('.main').append('<div><img src="' + logo + '"><p>' + name + '</p><p>' + status + '</p><p>' + game + '</p><p>' + views + '</p></div>');
})
} )
})
})
}
});
答案 0 :(得分：0)
您可以移出追加行。您说您无权访问变量，但您只是将它们存储在results数组中，因此您可以从那里访问它们。所以简单地移出线并改变是这样的：
results.forEach(function(result){
$('.main').append('<div><img src="' + result.logo + '"><p>' + result.name + '</p><p>' + result.status + '</p><p>' + result.game + '</p><p>' + result.views + '</p></div>');
})
（请注意，您不应该使用名称results.forEach(function(results){ results streamers两次，与forEach类似。您正在运行results result，因此每个var streamers;
var streamCallsCompleted;
var results;
$(document).ready(function() {
streamers = ["FreeCodeCamp", "PlayHearthstone", "summit1G", "BradfordLee", "Savjz", "Z28RyanK"];
results = [];
streamCallsCompleted = 0;
getAndAppendInfo(streamers);
// parseFloat shouldn't be necessary as views should be a whole number
results.sort(function(b, a) {
return parseInt(a.views) - parseInt(b.views);
});
});
function getAndAppendInfo(streamers) {
streamers.forEach(
function(streamer) {
$.getJSON('https://wind-bow.gomix.me/twitch-api/channels' + '/' + streamer + '?callback=?', function(data) {
channelCallSuccess(data, streamer)
})
.fail(channelCallError);
});
}
function channelCallError() {
streamCallsCompleted++;
checkAndAppendResults();
}
function streamCallError() {
streamCallsCompleted++;
checkAndAppendResults();
}
function channelCallSuccess(data, streamer) {
var name = data.display_name;
var game = data.game;
var logo = data.logo;
$.getJSON('https://wind-bow.gomix.me/twitch-api/streams' + '/' + streamer + '?callback=?', function(data) {
streamCallsCompleted++;
var status = data.stream ? "Online" : "Offline";
var views = data.stream ? data.stream.viewers : 0;
results.push({
"name": name,
"logo": logo,
"status": status,
"game": game,
"views": views
});
checkAndAppendResults();
});
}
function checkAndAppendResults() {
if (streamCallsCompleted < streamers.length) {
return;
}
console.log(results);
results.forEach(function(result) {
$('.main').append('<div><img src="' + result.logo + '"><p>' + result.name + '</p><p>' + result.status + '</p><p>' + result.game + '</p><p>' + result.views + '</p></div>');
});
}
（不是复数）
下面我重写了你的代码，修正了一些错误。请参阅此fiddle中的实际操作。
var $filters = $('.filter');
var $filtered = $('.categ');
$filters.on('click', function(){
$filters.removeClass('filterActive');
$(this).addClass('filterActive');
$filtered.removeClass('filterActive');
$filtered.eq(k).addClass('filterActive');
});
基本上，这里的要点是getJSON调用是异步的。这意味着这段代码不会按顺序执行。因此，我们必须跟踪我们拨打的电话数量。只有当所有呼叫都成功或错误时，我们才会处理结果。