Load JSON file into model using Javascript / jQuery (deferred, asynchronous)

Question

As a beginner I am always determined to improve myself. I've got written the following Code using jQuery that is working fine. However, I am sure that there are cleaner ways for achieving the same.

Right now, I am struggling with the this keyword and the asynchronous loading of the JSON file. Moreover, I am not sure whether you should call an function for initialization the way I did.

Do you have any suggestions for improvements?

$(function(){ function Model() { this.data = null; this.init(); }; Model.prototype = { deferred: $.Deferred(), config: { jsonFile: 'dump.json' }, init: function() { this.loadJson(); }, loadJson: function() { var self = this; jQuery.getJSON( this.config.jsonFile, function(data) { self.data = data; self.deferred.resolve(); } ) .fail(function() { console.error("Loading JSON file failed"); }) .always(function() {}); }, getData: function(callback) { console.log("getData") var self = this; $.when(this.deferred) .done(function() { callback(self.data) }) }, }; var model = new Model(); model.getData(function(data) { console.log(data) }); }); 

(duplicate of https://stackoverflow.com/q/23142089/3546614)

Update 1

I've just updated my code (and truncated unimportant stuff) taking @jgillich's advices into account. For the moment I feel better reading the JSON file when the object is generated which is why I outsourced the operation into separate function.

$(function(){ function Model() { this.loadJson(); }; Model.prototype = { deferred: $.Deferred(), jsonFile: 'dump.json', loadJson: function() { $.getJSON(this.jsonFile) .done(function (data) { this.data = data; this.deferred.resolve(data); }.bind(this)) .fail(this.deferred.reject); }, getData: function() { return this.deferred.promise(); }, }; var model = new Model(); model.getData().done(function(data) { console.log('done') console.log(data) }); }); 

Answer 1

• Storing deferred in the model and then passing a callback to getData is a bit obscure. You could write it like this instead:

  getData: function() { var deferred = $.Deferred(); if(!this.data) { $.getJSON('...',).done(function (data) { this.data = data; deferred.resolve(data); }.bind(this)).fail(deferred.reject); } else { deferred.resolve(this.data); } return deferred.promise(); } model.getData().done(function (data) { /* ... */}); 

• Use either $ or jQuery, don't mix them.

• Use Function.prototype.bind instead of var self = this.

• Use semicolons after each statement (or leave them out entirely if you prefer that).

• this.data = null; seems pointless, newly created objects don't have such a property.