Custom javascript class and private variable scope issue

Question

I am having some trouble with the classic javascript local variable scope topic, but dealing with a JSON variable. I have looked at other questions here regarding the same thing, but nothing has matched my case exactly, so here goes. I have a class that I have made from javascript that has 3 methods: func1, func2, and func3. I also have a local JSON variable that is being set in one of the methods from an ajax call I am making with jquery, but is not set when I call a method that returns that local variables value. I know the ajax is working fine, b/c I can display the data that is being returned and being set to the json variable fine with no problem. It is only happening when I call another method that interacts with that JSON variable. Here is a basic version of my code:

   function func1(){
       func2();
    }

    function func2(){
       $.getJSON("http://webservice.mydomain.com/methodname&jsoncallback=?",
         function(data){
            this.z = eval("(" + data.d + ")");
            alert(data.d); //this displays the data!
            alert(this.z.ArrayProperty[0].Property1); //this displays 
                                                      //the correct data too!
         }
       );   
    }

    function func3(){
       return this.z.ArrayProperty[0].Property1;
    }

    function myClass(var1, var2){
       this.x = var1;
       this.y = var2;

       this.z = "";

       this.func1 = func1;
       this.func2 = func2;
       this.func3 = func3;
    }

And then in my .html page, I am having the following code:

var obj = new myClass(1,2);

obj.func1("abc");
alert(obj.func3()); //ERROR: this.z.ArrayProperty is undefined

Any ideas?!?! I am racking my mind!

Thanks

Sam Hasler · Accepted Answer · 2009-08-07 19:46:11Z

2

I don't think this is anything to do with scope.

Remember that the AJAX call is asynchronous so func3 is being called before the JSON has been returned and your anonymous function has had a chance to set this.z to anything.

answered Aug 7, 2009 at 19:46

Sam Hasler

12.7k10 gold badges74 silver badges106 bronze badges

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

1 Comment

Dan Appleyard Over a year ago

You are spot on Sam. Now I just have to find a good way to get around that. Thanks!

Norman · Accepted Answer · 2009-08-07 19:42:43Z

0

I don't think "this" inside your callback is the same "this" that defined func2. Using the Prototype JavaScript library, you can use bind() to get around this.

You may be able to just add a new variable in func2, or use a bind function in whatever library you are using.

func2() {
    var me = this;
       $.getJSON("http://webservice.mydomain.com/methodname&jsoncallback=?",
             function(data){
                me.z = eval("(" + data.d + ")");
                    success = true;
                    alert(data.d); //this displays the data!
                    alert(this.z.ArrayProperty[0].Property1);
             }
       );       
    }

answered Aug 7, 2009 at 19:42

Norman

5192 silver badges4 bronze badges

Comments

psayre23 · Accepted Answer · 2009-08-07 19:45:12Z

0

I could be completely wrong, but it look like the "this" variable is messing you up. "this" variable depends on how you call the function. It looks like you really don't want to be using that. Instead, I use:

func2() {
  var that = this;

Then later in the code use:

function(data){
  that.z = eval...

answered Aug 7, 2009 at 19:45

psayre23

3,0742 gold badges18 silver badges10 bronze badges

Collectives™ on Stack Overflow

Custom javascript class and private variable scope issue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related