setting variable in asynchronous javascript call [duplicate]

Question

I have an object x of class C. The attribute x.myval should be set by calling x.load(), which in turn should get its data from an asynchronous ajax call.

class C {
    constructor() {
        this.myval = "hello";
    }
    load() {
        return $.ajax({
            type: "GET",
            url: "file.txt",
            // suppress "xml not well-formed error in firefox", 
            beforeSend: function(xhr){
                if (xhr.overrideMimeType) { xhr.overrideMimeType("text/plain"); }
            },
            contentType: "text/plain",
            dataType: "text",
            success: function(text) {
                this.myval = text;
            }
        });
    }
}

var x = new C();
$.when(x.load()).done(function(a1,a2) {
    console.log(x.text); //should print the content of file.txt
});

I get an error this.myval is undefined, obviously because this is set to this of jquery-$.

I also tried:

class C {
    constructor() {
        this.myval = "hello";
    }
    load() {
        var callback = function callbackClosure(mythis) {return function(text) {
            this.myval = text;
        }}(this);

        return $.ajax({
            type: "GET",
            url: "file.txt",
            // suppress "xml not well-formed error in firefox", 
            beforeSend: function(xhr){
                if (xhr.overrideMimeType) { xhr.overrideMimeType("text/plain"); }
            },
            contentType: "text/plain",
            dataType: "text",
            success: callback
        });
    }
}

var x = new C();
$.when(x.load()).done(function(a1,a2) {
    console.log(x.text); //should print the content of file.txt
});

But this trew an exception jQuery.Deferred exception: assignment to undeclared variable...

Use an arrow function.

Andrew Li
– Andrew Li

2018-08-20 12:50:34 +00:00
Commented Aug 20, 2018 at 12:50 — Andrew Li
– Andrew Li, Commented Aug 20, 2018 at 12:50

Phiter · Accepted Answer · 2018-08-20 12:52:09Z

1

this doesn't refer to your instance in this line:

success: function(text) {
    this.myval = text;
}

You can make a temp variable referring to your instance in the outer method, like this:

load() {
    var that = this;
    return $.ajax({
        type: "GET",
        url: "file.txt",
        // suppress "xml not well-formed error in firefox", 
        beforeSend: function(xhr){
            if (xhr.overrideMimeType) { xhr.overrideMimeType("text/plain"); }
        },
        contentType: "text/plain",
        dataType: "text",
        success: function(text) {
            that.myval = text;
        }
    });
}

Or, you can use an arrow function:

load() {
    return $.ajax({
        type: "GET",
        url: "file.txt",
        // suppress "xml not well-formed error in firefox", 
        beforeSend: function(xhr){
            if (xhr.overrideMimeType) { xhr.overrideMimeType("text/plain"); }
        },
        contentType: "text/plain",
        dataType: "text",
        success: (text) => {
            this.myval = text;
        }
    });
}

edited Aug 20, 2018 at 12:52

answered Aug 20, 2018 at 12:51

Phiter

15k14 gold badges52 silver badges87 bronze badges

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

6 Comments

Andrew Li Over a year ago

They don't have to... there are more elegant solutions. Also, in the future if there's a duplicate (canonical) could you also vote to close as well instead of answering right away? This is an incredibly common problem.

Phiter Over a year ago

Yeah, I rephrased that. Arrow function is the way to go.

Phiter Over a year ago

@Li357 it is indeed extremely common. I had answered the exact same thing about an hour before this one stackoverflow.com/questions/51929737. But it is hard to mark this as a duplicate of another question. I couldn't find any question that would fit.

Andrew Li Over a year ago

Then don't keep answering. Vote to close as duplicates.

Markus Over a year ago

@Li357 think of noobs like me: I'm glad I got an answer. I have been searching for more than an hour before I posted this question.

|

Collectives™ on Stack Overflow

setting variable in asynchronous javascript call [duplicate]

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related