javascript访问数组以外的功能

Question

所以我正在做这个twitch.tv API页面的免费代码阵营。 我正试图迭代通过流数组并将数据推送到结果数组，按查看者排序并显示页面上结果数组中的数据。

问题是.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>'); 
        })      
    } )    
})   
      })  
     } 
    }); 

Answer 1

您可以移出附加行。你说你不能访问这些变量，但是你只是将它们存储在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调用是异步的。这意味着这段代码不会按顺序执行。因此，我们必须跟踪我们拨打多少电话。只有当所有呼叫都成功或错误时，我们才会处理结果。