Access `this` variable of parent object inside ajax

Question

I understand Ajax is asynchronous, but I still fail to understand how object scoping and the use of how javascript likes to use this works.

mylibrary = { 
        my_variable: 0,
        my_function: function() {
                $.ajax({
                        url: "/theinternet",
                        method: "POST",
                        data: {
                                // things
                        },   
                        success: function(response) {
                                this.my_variable += 1; // How do I access my_variable?
                                console.log("HOORAY!");
                        },   
                        error: function(error) {
                                console.log("ERROR");
                        }    
                // }).bind(this); this doesn't work.
                }).bind(this);
        }   
}

How on earth am I suppose to access my_variable inside the success function of the ajax call?

It seems like this would be a pretty common thing people need to do, no?

You need to use `bind` on the function expression, not on the return value of `$.ajax()`. — Bergi, Apr 30 '18 at 12:34

score 2 · Answer 1 · answered Apr 30 '18 at 12:32

2

Use the object name. Change this.my_variable += 1;

To

mylibrary.my_variable += 1;

answered Apr 30 '18 at 12:32

Mamun

66,969
9
47
59

score 2 · Answer 2 · answered Apr 30 '18 at 12:33

Solution Changing my_function: function() to arrow function () => syntax should solve the problem.

Background The problem is that the value of this that is passed to the ajax call comes from the my_function and not the my_library object. It is because function always scopes their own this, you can use arrow function which does not yield new this.

score 1 · Answer 3 · answered Apr 30 '18 at 12:33

You can assign the reference of this in a variable outside the ajax request so that the variable can be accessed inside the ajax request. Something like this,

mylibrary = {
    my_variable: 0,
    my_function: function() {
      var _this = this;
      $.ajax({
        url: "/theinternet",
        method: "POST",
        data: {
          // things
        },
        success: function(response) {
          _this.my_variable += 1; // How do I access my_variable?
          console.log("HOORAY!");
        },
        error: function(error) {
          console.log("ERROR");
        }
      });
    }
  }

In this code we have var _this = this; where _this is accessible inside the $.ajax as that ajax request is in my_function and _this is in local scope of my_function which references this. Now when you use _this.my_variable it will change the my_variable of the object mylibrary

And the error in your code is that you are not binding this with the function. You should be doing this to get your bind work

  mylibrary = {
    my_variable: 0,
    my_function: function() {
      $.ajax({
        url: "/theinternet",
        method: "POST",
        data: {
          // things
        },
        success: function(response) {
          this.my_variable += 1; // How do I access my_variable?
          console.log("HOORAY!");
        },
        error: function(error) {
          console.log("ERROR");
        }
      });
    }.bind(this);
}

score 0 · Answer 4 · answered Apr 30 '18 at 12:38

You can assign the scope of parent Method to a variable using let _this = this and use it inside the inner functions.

 mylibrary = { 
            my_variable: 0,
            my_function: function() {
                    let _this = this;
                    $.ajax({
                            url: "/theinternet",
                            method: "POST",
                            data: {
                                    // things
                            },   
                            success: function(response) {
                                    _this.my_variable += 1; // How do I access my_variable?
                                    console.log("HOORAY!");
                            },   
                            error: function(error) {
                                    console.log("ERROR");
                            }    
                    // }).bind(this); this doesn't work.
                    }).bind(this);
            }   
    }

Access `this` variable of parent object inside ajax

4 Answers4