How do i assign value to instance variable within ajax success function

Question

I want to assign value to a class instance variable from within ajax success functions, code will explain better what I mean.

var SomeClass = function() {
    this.someMethod = function() {
        $.ajax({
            method: 'GET',
            url: 'http://example.com',
            success: function(resp) {
                var js = JSON.parse(resp);
                // I want to assign js object to SomeClass.response instance variable
            };
        });
    };
};

If I try this.response, it obviously doesn't work. If I assign this to some variable before I make ajax call, It doesn't work either. I mean this:

var SomeClass = function() {
    this.someMethod = function() {
        // Asign this to self
        var self = this;
        $.ajax({
            method: 'GET',
            url: 'http://example.com',
            success: function(resp) {
                var js = JSON.parse(resp);
                // I want to assign js object to SomeClass.response instance variable
                self.response = js;  // However it doesn't work
            };
        });
    };
};

I'll appreciate your help!!!

Ok, this will be an instance of SomeClass. Then you probably do soveVariable.someMethod(). And what next? — dfsq
– dfsq, Commented Oct 12, 2014 at 10:02

Barmar · Accepted Answer · 2014-10-12 10:10:22Z

1

Since AJAX is asynchronous, you can't use someVariable.response until after the AJAX call completes. The appropriate way is to have someMethod take a callback:

var SomeClass = function() {
    this.someMethod = function(callback) {
        // Asign this to self
        var self = this;
        $.ajax({
            method: 'GET',
            url: 'http://example.com',
            success: function(resp) {
                var js = JSON.parse(resp);
                // I want to assign js object to SomeClass.response instance variable
                self.response = js;
                callback();
            };
        });
    };
};

Then you would use it like this:

var someVariable = new someClass;
someVariable.someMethod(function() {
    console.log(someVariable.response);
});

answered Oct 12, 2014 at 10:10

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

skay- · Accepted Answer · 2014-10-12 10:18:43Z

1

While @Barmar solution will work, i think the best way its to just use promises.. and since you are using jQuery already this is pretty easy. See below:

var SomeClass = function() { this.someMethod = function() { return $.ajax({ method: 'GET', url: 'http://example.com' }); }; };

And then you do something like this:

var someVariable = new SomeClass();
    someVariable.someMethod().then(function(returnedValue){
        console.log(JSON.parse(returnedValue));
});

I believe that promises is the way to go and since they will be included in ES6... its better to familiarise yourself with the concept.

answered Oct 12, 2014 at 10:18

skay-

1,5863 gold badges17 silver badges26 bronze badges

Collectives™ on Stack Overflow

How do i assign value to instance variable within ajax success function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related