javascript访问数组以外的功能
问题描述:
所以我正在做这个twitch.tv API页面的免费代码阵营。 我正试图迭代通过流数组并将数据推送到结果数组,按查看者排序并显示页面上结果数组中的数据。javascript访问数组以外的功能
问题是.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>');
})
} )
})
})
}
});
答
您可以移出附加行。你说你不能访问这些变量,但是你只是将它们存储在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
两次做results.forEach(function(results){
,与streamers
类似你正在运行一个forEach
超过results
,所以它的对于每个result
(不是复数))
下面我重写了你的一段代码,修复了一些错误。在这个fiddle看到它的行动。
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>');
});
}
基本上,这里的要点是getJSON调用是异步的。这意味着这段代码不会按顺序执行。因此,我们必须跟踪我们拨打多少电话。只有当所有呼叫都成功或错误时,我们才会处理结果。
为什么你的'forEach'回调的函数参数与你的数组相同?他们都被称为'streamers'。由于名称冲突,您可能遇到了一些范围问题? – ryanyuyu
我以为我必须通过飘带阵列。我不知道我在做什么显然哈哈。 – lowercanada
'forEach'接受你已经内联定义的函数。该匿名函数定义了自己的参数列表。 '.forEach'期望该函数接受来自父数组的代表'element,index,entireArray'的参数。请参阅[文档](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=example#Parameters)。尝试改变你的函数参数,如'streamer'(否's')。 – ryanyuyu