JavaScript object going out of scope

Question

namespace.items.Load = function (arg1, arg2) {
    $.getJSON("/Object/Items", { "Arg1": arg1, "Arg2": arg2 }, function (Items) {
        return Items;
    });
}

Do the above object "Items" go out of scope or something? Because after calling this function all I get is "undefined". How can I fix this?

Welcome to the world of asynchronous programming with callbacks. Some degree of mental adjustment is required. — Jon, Sep 17 '13 at 11:29

score 2 · Accepted Answer · answered Sep 17 '13 at 11:27

2

The getJSON request is asynchronous, so you'll have to provide a callback to your items.Load function as well.

namespace.items.Load = function (arg1, arg2, callback) {
    $.getJSON("/Object/Items", { "Arg1": arg1, "Arg2": arg2 }, callback);
};

answered Sep 17 '13 at 11:27

Björn

29,019
9
65
81

I see now why my thinking was wrong. Of course this is asynchronous. And of course the callback function cannot return anything through the getJSON function. This was the simplest of the answers. – Espen Sep 18 '13 at 10:54

score 1 · Answer 2 · answered Sep 17 '13 at 11:31

$.getJSON implements the promise interface, so you should be able to do this:

namespace.items.Load = function (arg1, arg2) {
  return $.getJSON("/Object/Items", { "Arg1": arg1, "Arg2": arg2 });
}

namespace.items.Load().then(function (items) {
  console.log(items);
});

score 1 · Answer 3 · edited May 23 '17 at 10:25

First, there is no return statement inside the Load function. In this case, it will return undefined by default. There is nothing unexpected so far, but I guess you rather wanted to do things like that :

namespace.items.Load = function (arg1, arg2) {
    return $.getJSON(
        "/Object/Items", 
        { "Arg1": arg1, "Arg2": arg2 }, 
        function (Items) { return Items; }
    );
}

That said, keep in mind that there is an Ajax call behind the scene which results in this kind of scenario :

Load function is called.
An Ajax request is sent to a remote server.
Load function returns.
An Ajax response is sent back.
function (Items) { return Items; } is called.

What you were expecting to be returned by the Load function is obviously not Items. Thereby, you might use this kind of solution instead : https://stackoverflow.com/a/18793057/1636522.

score 0 · Answer 4 · answered Sep 17 '13 at 11:27

AJAX methods return instantly so then will return undefined. You need to specify a callback function if you want to use those "Items" results such as assigning them to a variable which can be accessed by other functions in your namespace.

namespace.itemList = {};

namespace.items.Load = function (arg1, arg2) {
$.getJSON("/Object/Items", { "Arg1": arg1, "Arg2": arg2 }, function (Items) {
    namespace.itemlist = JSON.parse(Items);
});
}

JavaScript object going out of scope

4 Answers4