JQuery Ajax and Object field

Question

I have this code:

MyObject = function(){
    this.field = null;

    this.build = function(){
        var my_url = "...";
        var my_data = "...";
        $.get(my_url, my_data, function(result){
           this.field = result;
        });
    }

    this.get = function(){
        return this.field;
    }
}

object = new MyObject();
object.build();
my_result = object.get()

my_result now is null because when the inner function is executed this is not my object.
So, how can i set this.field with the $.get returned value???

_please_ don't call your object `Object`! – Alnitak Apr 20 '11 at 17:09 — Alnitak, Apr 20 '11 at 17:09
@Alnitak ok i'll call MyObject... – bicccio Apr 20 '11 at 17:17 — bicccio, Apr 20 '11 at 17:17

score 1 · Accepted Answer · answered Apr 20 '11 at 17:10

1

In the top of your constructor, do:

var self = this;

this creates a new scoped variable that refers to the current object.

Then in the AJAX call back do:

self.field = result;

answered Apr 20 '11 at 17:10

Alnitak

334,560
70
407
495

I recommmend doing this inside the method `this.build` so that `object.build.apply(scope, ...)` doesn't break. – Raynos Apr 20 '11 at 17:25
in practise if it mattered I'd probably do both. – Alnitak Apr 20 '11 at 18:56

score 1 · Answer 2 · answered Apr 20 '11 at 17:28

MyObject = function(){
    this.field = null;

    this.build = function(cb){
        var my_url = "...";
        var my_data = "...";
        var self = this;
        $.get(my_url, my_data, function(result){
           self.field = result;
           cb(result);
        });
    }

    this.get = function(){
        return this.field;
    }
}

object = new MyObject();
object.build(function(field) {
    console.log(object.get() === field);
});

I recommend you pass a callback to your build function so you can be notified immediatly when your field is set.

Also placing var self = this inside your method ensures that you can call object.build.call(scope, f) without it being bound to the wrong scope.

This pattern is particularly useful in inheritance when you want to call a method of another class.

pls elaborate on the scope issue - are you saying that you might specifically want to use a different scope than that of the constructed object itself? — Alnitak, Apr 20 '11 at 19:04

Prisoner ZERO · Answer 3 · 2011-04-27T11:41:13.500

In the future, try using the Module Pattern:

HERE IS THE MODULE PATTERN:

<script type="text/javascript">
    var myNamespace = (function($) {
        var publicInstances = {};

        // ***********************
        // myObject
        publicInstances.myObject = myObject;
        function myObject() {

            /// <summary>A pointer to this</summary>
            var self = this;

            this.someProperty = new String();

            this.initialize = function() {
                /// your code here
            }
            this.someMethod = function() {
                /// your code here
            }

            self.initialize();
        }

        return publicInstances;
    })(jQuery);


    jQuery(document).ready(function() {
        // Use would look like
        var myInstance = new myNamespace.myObject();
    });
</script>

HERE IS WHAT YOUR OBJECT MIGHT LOOK LIKE:

var myNamespace = (function($) 
{
    var publicInstances = {};

    // ***********************
    // myObject
    publicInstances.myObject = myObject;
    function myObject(url, data) {

        /// <summary>A pointer to this</summary>
        var self = this;
        /// <summary>Contains the result</summary>
        this.field = null; // Name this result instead.

        this.url = url;
        this.data = data;

        this.initialize = function() {
            /// Initialize whatever
        }
        this.build = function() {
            $.get(self.url, self.data, function(result) {
                self.field = result;
                cb(self.field);
            });
        }
        this.cb = function(result) {
            /// Do whatever
        }

        self.initialize();
    }

    return publicInstances;
})(jQuery);

that pattern is a bit over engineered and not that good. Still leaking into global scope. and your not opening yourself to async loaders. But it is better then just adhoc coding ! — Raynos, Apr 20 '11 at 19:15
I don't see what you mean by "leaking" into global scope. If you mean you would create a persistent object...I don't see that as bad. In fact, that is exactly what he wants to do. How's this? If you don't like it please post an better alternative? — Prisoner ZERO, Apr 26 '11 at 18:28
Additionally, the Module Pattern is widely used...and I got it from a John Resig example! — Prisoner ZERO, Apr 27 '11 at 13:15
@Raynos - There is a discussion of your comment going on at http://stackoverflow.com/questions/5951228/what-is-meant-by-leaking-into-global-scope. If you would like to participate? — meouw, May 10 '11 at 14:40

JQuery Ajax and Object field

3 Answers3

Linked