jQuery каждый переменный переменной цикла потерял

Question

, имея небольшую проблему с моей переменной scope в jQuery, как получится, если я делаю console.log за пределами цикла .each, я получаю пустой массив в $ stockData? (Если я сделать это внутри .each, он прекрасно работает, записывает массив со каждый раз, когда добавляется значение)

$(document).ready(function(){ 
    // stock data will contain all the merged data from the database and yahoo queries 
    var $stockData = new Array(); 

    // get data from yahoo and merge with dbData, add to stockData array 
    $.getJSON("/get_portfolio.php", function(dbData) { 
     $.each(dbData, function(index) { 
      var stock = dbData[index] 
      $.ajax({ 
       url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22"+stock.stock_symbol+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", 
       crossDomain: true 
      }).success(function(data){ 
       var quote = data.query.results.quote; 
       $.extend(quote, stock); 
       $stockData.push(quote); 
      }); // end success 
     });// end each 
    }); // end getJSON 
    console.log($stockData); 
}); // end document.ready 

Answer 1

при вызове

$.getJSON("/get_portfolio.php", function(dbData) { ... });

эта часть:

function(dbData) { ... }

не запускается сразу. JavaScript говорит: «О, вы сделали HTTP-запрос? Я возьму на себя эту функцию, которую вы мне дали, и запустите ее после, запрос выполнен». А остальная часть кода будет продолжать работать, так это:

console.log($stockData);

будет работать первым. Таким образом, фактический порядок исполнения здесь:

1. запустить getJSON
2. console.log работает
3. на запрос HTTP отделок и ваш обратный вызов работает

положить console.log внутри getJSON блок, сразу после .each цикла:

$(document).ready(function(){ 
    // stock data will contain all the merged data from the database and yahoo queries 
    var $stockData = new Array(); 

    // get data from yahoo and merge with dbData, add to stockData array 
    $.getJSON("/get_portfolio.php", function(dbData) { 
     var requestsDone = 0; 
     $.each(dbData, function(index) { 
      var stock = dbData[index] 
      $.ajax({ 
       url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22"+stock.stock_symbol+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", 
       crossDomain: true 
      }).success(function(data){ 
       var quote = data.query.results.quote; 
       $.extend(quote, stock); 
       $stockData.push(quote); 
       if(++requestsDone == dbData.length) done(); 
      }).error(function(){ 
       if(++requestsDone == dbData.length) done(); 
      }); 
     });// end each 
     function done() { 
      console.log($stockData); // put this here 
     } 
    }); // end getJSON 

}); // end document.ready 

Answer 2

Вам нужно ждать функции getJSON быть комп leted, попробуйте следующее:

$(document).ready(function(){ 
    // stock data will contain all the merged data from our database and yahoo queries 
    var $stockData = new Array(); 

    // get data from yahoo and merge with dbData, add to stockData array 
    $.getJSON("/get_portfolio.php", function(dbData) { 
     $.each(dbData, function(index) { 
      var stock = dbData[index] 
      $.ajax({ 
       url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22"+stock.stock_symbol+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", 
       crossDomain: true 
      }).success(function(data){ 
       var quote = data.query.results.quote; 
       $.extend(quote, stock); 
       $stockData.push(quote); 
      }); // end success 
     });// end each 

     console.log($stockData); 

    }); // end getJSON 
});