Return array in Dojo - dojo

Question

I'm new to Dojo and having a hard time with the following piece of code. I don't understand why the chartData is empty at the very end. I created this method based on an example on the Dojo site.
The code is the following:
function(xhr, json, arrayUtil, number, Chart, theme) {
var chartData = [];
var def = xhr.get({
url: "cpuusage.json",
handleAs: "json"
});
def.then(function(res){
var data = [];
arrayUtil.forEach(res.chart, function(chart){
data[chart.x] = number.parse(chart.y);
});
chartData = data;
console.info("chartData1: ", chartData);
}, function(err){
console.error("Failed to load JSON data");
});
The first console.info within def.then says that the chartData has the correct value. When I however print the value of chartData after the def.then method finished, it's empty.
How can I make sure that chartData has the same value in and after the def.then call. Many thanks

Answer 1

the, methods in the xhr are all async by nature, but they return a promise. if you want to execute some code after the xhr method it should look like this:
function(xhr, json, arrayUtil, number, Chart, theme) {
var chartData = [];
xhr.get({
url: "cpuusage.json",
handleAs: "json",
load: function(jsonData) {
arrayUtil.forEach(jsonData.chart, function(chart){
chartData[chart.x] = number.parse(chart.y);
});
console.info("JSON loaded from server: ", chartData);
},
error: function() {
console.error("Failed to load JSON data");
}
}).then(function(jsonData){
console.info("chartData: ", chartData);
});
by using the then function of the promise, you make sure your code executes after the AJAX call