Question

I can’t access the attribute of an instantiated class. The attribute is set using an AJAX call.

I am trying to define the class “CurrentUser”, and then set the attribute “userId” using AJAX.

Here I define the class CurrentUser, and give it the attribute userID:

function CurrentUser() {
    // Do an ajax call to the server and get session data.
    $.get("../../build/ajaxes/account/get_user_object_data.php", function(data) {
         this.userId = data.userId;
         console.log(data.userId);   // This will correctly output "1".
    }, "JSON");
}

Here I instantiate a CurrentUser named billybob. Notice how I can’t output billybob’s attribute:

// Instantiate the user. 
   var billybob = new CurrentUser();
   console.log(billybob.userId);     // This will incorrectly ouput "undefined".

I’ve checked the common errors with AJAX:

• The AJAX call returns the data correctly as a JSON object. I can read the correct object in Firebug / Network console. The AJAX call also has a status of “200” and “OK”.

• I can log the AJAX call’s data correctly, as seen in the first part of my code where I log data.userId.

Answer 1

Maybe this clears it out:

In your original code:

function CurrentUser() {
    // Do an ajax call to the server and get session data.
    $.get("../../build/ajaxes/account/get_user_object_data.php", function(data) {
     this.userId = data.userId;
     console.log(data.userId);   // This will correctly output "1".
    }, "JSON");
}

You are creating an anonymous function on the fly, that will be later called by jQuery’s internals with this
set to an ajax object. So this will be the ajax object inside the anonymous function, not billybob. So when
you do this.userId = ... this means the ajax object which doesn’t have a userid property.

jQuery will have no idea where you got your callback function from, so it cannot set the this automagically
for you.

What you must do is to save the billybob (or any CurrentUser instance) reference and use it in the callback like so:

function CurrentUser() {
var self = this;
    $.get("../../build/ajaxes/account/get_user_object_data.php", function(data) {
     self.userId = data.userId; //self refers to what this refered to earlier. I.E. billybob.
     console.log(data.userId, self.userid);   // This will correctly output "1".
    }, "JSON");
}

Also note that:

 var billybob = new CurrentUser();
   console.log(billybob.userId);   

By the time you call console.log (I.E. instantly after creating billybob), the ajax request hasn’t been completed yet so it is undefined.