How to push parent object from jQuery.ajax success statement

Question

I have one function which contains child functions and objects:

//API load function
var apiDataLoader = function ()     {

    // Set default settings
    this.apiSeason = '7924';
    this.apiMatchDay = '30';
    this.apiType = 'gamelist';
    this.apiLink = 'http://example.com/';
    this.apiLinkData = {
        app: this.apiType,
        season_num: this.apiSeason,
        match_day: this.apiMatchDay
    }
    this.apiData = new Object;


    //load API
    apiDataLoader.prototype.load = function()       {
        $.ajax({
            url: this.apiLink,
            data: this.apiLinkData,
            success: function(data) {
                apiDataLoader.apiData = data; //this is not working
                // I need to push somehow responce data to 'apiDataLoader.apiData' object
            }
        });
    }
}

As you can see in my code, I'm trying to push $.ajax response to parent function object element named: apidataLoader.apiData , but i can't achieve this.

Any ideas?

PS: response in data value is JSON object.

Answer 1

Try this:

apiDataLoader.prototype.load = function()       {
        var self = this; //Store the current object to avoid `this` problem in javascript.
        $.ajax({
            url: this.apiLink,
            data: this.apiLinkData,
            success: function(data) {
                self.apiData = data; //assign value
            }
        });
    }

Answer 2

Since load() is defined on the prototype of apiDataLoader , it will receive an instance of apiDataLoader as a context when it is called, in others words, the this keyword inside load() will point to the instance of apiDataLoader on which it is called, so you need to change the code to this one:

apiDataLoader.prototype.load = function()       {

    var that = this; // this is the instance of apiDataLoader on which this method is called
    $.ajax({
        url: this.apiLink,
        data: this.apiLinkData,
        success: function(data) {
            that.apiData = data; //assign value
        }
    });
}

Answer 3

You need to reference the apiData property of the current object using this , however you'll need to cache it outside of the $.ajax success handler as the scope of this in that function will be different. Try this:

apiDataLoader.prototype.load = function() {
    var _this = this;
    $.ajax({
        url: this.apiLink,
        data: this.apiLinkData,
        success: function(data) {
            _this.apiData = data;
        }
    });
}

Answer 4

As it is right now you are creating a new property on the constructor apiDataLoader , not the current instance. Here's one way to do it:

$.ajax({
    url: this.apiLink,
    data: this.apiLinkData,
    dataType: 'json', //will automatically parse the response as JSON
    success: function(data) {
        this.apiData = data;
    },
    context: this //sets the context object to the current instance in the callback
});

Also, please note that your prototype functions should be declared outside the constructor, otherwise there's no advantage in using the prototype since the functions are redeclared for each newly created instances. Additionnaly, constructors starts with an upper-case letter as a convention in JS and you should probably follow it.

function ApiDataLoader() {
    //...
}

ApiDataLoader.prototype = {
    constructor: ApiDataLoader,
    load: function () {
        //...
    }
};