Calling a JSON function from a module in Dojo - json

Question

The contents of my dataHelper.js file:
define(["dojo/_base/declare", "dojo/dom", "dojo/_base/xhr", "dojo/json"],
function(declare, dom, xhr, json){
return {
getJSON: function(){
xhr.get({
url: "../../cpuusage.json",
handleAs: "json",
load: function(jsonData){
return jsonData;
},
error: function() {
}
});
}
};
});
I'm trying to run this from my index.html as follows:
var chartData = dataHelper.getJSON();
I think I have several issues. First of all, I'm not sure my module and the getJSON function is defined correctly. Secondly I get errors on my console:
TypeError: this.source is undefined
[Break On This Error]
= [],
dojo.js (line 362)
SyntaxError: missing : after property id
},
dojo.js (line 330)
SyntaxError: missing : after property id
},
dojo.js (line 330)
SyntaxError: missing : after property id
},
All I want to achieve first is load the json data into the chartData variable. Many thanks.

Answer 1

The first issue I'm seeing is you are treating an asynchronous process as if it was a synchronous one. The xhr.get returns immediately after the request to the server is sent, it does not block until a response is received.
First, I would add a console.log to your module definition to ensure that your dataHelper module is being loaded correctly.
define(["dojo/_base/xhr"],
function(xhr){
console.log('dataHelper.js loaded');
return {
//
};
});
Also note that above you aren't using any of the base dojo modules except dojo/_base/xhr, so it is unnecessary to include them (unless they are used outside this snippet).
You need to update your code to handle this call asynchronously. To do this, you could take advantage of the fact that the xhr.get method returns a Deferred object. This class makes dealing with asynchronous in a consistent manner quite easy.
To do this, update the dataHelper module to return the result of the xhr call:
define(["dojo/_base/xhr"], function(xhr){
return {
getJSON: function(){
//this returns a Deferred object, what to do on load and error is then handled by the invoker
return xhr.get({
url: "../../cpuusage.json",
handleAs: "json"
});
}
};
});
Then, when utilizing this module:
//replace dataHelper with whatever it's path is
require(['dataHelper'],function(dataHelper){
var deferred = dataHelper.getJSON();
deferred.then(function(data){
//this function is invoked once the data has been fully loaded
}, function(error){
//this function is invoked if an error occurs while loading the data (in case of a server error response or if the response isn't in the format you specified)
});
});

Answer 2

This is my proposal:
Your dataHelper.js file:
define("dataHelper", ["dojo/_base/declare", "dojo/dom", "dojo/_base/xhr"],
function(declare, dom, xhr){
return declare("dataHelper", [], {
getJSON: function(){
return xhr.get({
url: "../../cpuusage.json",
handleAs: "json"
});
});
};
});
your invocation:
require(["dataHelper"], function(dataHelper) {
var chartData;
dataHelper.getJSON().then(function(jsonData) {
chartData = jsonData;
//Continue doing stuff with chartData in here, not outside
});
});