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調用是異步的。這意味着這段代碼不會按順序執行。因此，我們必須跟蹤我們撥打多少電話。只有當所有呼叫都成功或錯誤時，我們纔會處理結果。