Question

here is my JavaScript code:

var Model =
{
    get: function(id)
    {
        return this.data[id];
    },

    data: {},

    init: function()
    {   
        var self = this;

        $.getJSON(urlToServer, function(data)
        {
            $.each(data, function(i, object)
            {
                self.data[object.id] = object;
                console.log(object.id); // output is: 1, then 2, then 3
            });
        });
    }
};

Model.init();
console.log(Model); // output is the initialized object with children objects 1, 2, 3
console.log(Model.get(1)); // output is undefined

As you can see from the console output i put in the comments, everything works fine until the last line of code. I define a Model and initialize it with some JSON objects provided by the server. But all of a sudden, when i try to access a single child object through the get() method, the Model appears to be undefined.

I just don’t get it, please help me out.

Thanks.

Answer 1

Looking at the sample code you used, Model.get(1) will always return undefined.

$.getJSON is an AJAX call that does not necessarily return immediately (known as asynchronous). You will need to use the callback you supplied to $.getJSON to fire off any logic depending on Model.get(1), otherwise it will remain undefined.