Question

this is driving me crazy.

It cannot seem to set the value of property from inside AJAX.

Below is my code

function Captcha(userKey) {
    var self = this;

    this.key;
    this.getCaptchaKey = function(userKey) {
        $.post('/api/captcha/get-key',data, function(data, status,jqXHR) {
            if(status) {
                self.key = data.data.captchaKey;

            }
        },"json");
    };
    this.getCaptchaKey(userKey);
}

I set ‘this’ as ‘self’ to reference from inside AJAX call.

then when I console.log() this object itself outside the object, it tells me the value is already set.

self.captcha = new Captcha(self.userKey);
    self.captchaKey = self.captcha.key

    console.log(self.captcha);

so ‘self.captcha’ return the object with correct value of ‘key’ set from AJAX call.

but when I console.log(self.captcha.key), it says ‘undefined’

I have been googling everywhere but couldn’t find answer.

Answer 1

I think your issue is the fact you are treating an asynchronous call as synchronous. You are reading the value before the Ajax call returns.