Globales Array wird nicht mit d3.json aktualisiert

Question

Warum sind die arr-Daten nur innerhalb der json-Funktion verfügbar? Das erste console.log gibt Daten zurück, das zweite ist ein leeres Array? Muss ich den ersten Anruf beenden oder irgendwie in ein dynamisches Array kopieren?

var inputURL; 
    var start = "2016-09-01"; 
    var end = "2016-09-06"; 
    var arr = []; 
    var stock = ["AZN.L", "GOOGL", "AAPL"]; 

    var arrayLength = stock.length; 
    for (var i = 0; i < arrayLength; i++) { 
     itern(stock[i]); 
    }; 


    function itern (stock) { 

    inputURL = "http://query.yahooapis.com/v1/public/yql" + 
     "?q=select%20*%20from%20yahoo.finance.historicaldata%20" + 
     "where%20symbol%20%3D%20%22" 
     + stock + "%22%20and%20startDate%20%3D%20%22" 
     + start + "%22%20and%20endDate%20%3D%20%22" 
     + end + "%22&format=json&env=store%3A%2F%2F" 
     + "datatables.org%2Falltableswithkeys"; 


    // Get the data 
    d3.json(inputURL, function (error, data) { 

     data.query.results.quote.forEach(function (d) { 
      d.date = parseDate(d.Date); 
      // console.log(d.date); 
      d.high = +d.High; 
      d.low = +d.Low; 
      arr.push({ 
       company: stock, 
       date: d.date, 
       high: d.high, 
       low: d.low, 
       sortable: true, 
       resizeable: true 
      }); 
     }); 

     console.log(arr); //returns arr with data 

    }); 
     console.log(arr); // returns arr[] 
    }; 

Answer 1

d3.json ist eine asynchrone Funktion, so würde nur arr füllt werden, nachdem Rückruf ausgeführt. Man könnte vielleicht eine Funktion aufrufen, nachdem arr wie in der unten stehenden Rückruf aufgefüllt wird:

var dataAvailable = function() { 
     console.log(arr); 
    }; 

    d3.json(inputURL, function (error, data) { 

     data.query.results.quote.forEach(function (d) { 
      d.date = parseDate(d.Date); 
      // console.log(d.date); 
      d.high = +d.High; 
      d.low = +d.Low; 
      arr.push({ 
       company: stock, 
       date: d.date, 
       high: d.high, 
       low: d.low, 
       sortable: true, 
       resizeable: true 
      }); 
     }); 
     dataAvailable() 
//  console.log(arr); //returns arr with data 

    });