Unable to read returned Javascript object from a different script file

Question

Hey guys I have two simple JavaScript page. One holds the function that returns the object. The other read the returned object.

Unfortunately I am unable to read the returned object.

main.js

var userObj = getUserInfo('2');
console.log(userObj); //undefined
console.log(userObj.name); //undefined

globals.js

function getUserInfo(mapID){
    var jqxhr = $.ajax({
        url: user_url,
        type: "GET",
        cache: true,
        dataType: "json",
        statusCode: {
            404: function () {
                handleError404("Error 404 at getUserInfo();")
            },
            500: function () {
                handleError500("Error 500 at getUserInfo();")
            },
        },
        success: function (data) {
            console.log(data);
            var obj = {
                name: data.name,
                age: data.age,
                weight: data.weight
            }
            console.log(obj); //{name:"Kanye West", age:23, weight:"450lbs"}
            return obj;
        }
    });
}

As you can see, If I was to output the object in the function itself, I see the result. But not if I call it from the main.js page.

Any help would be greatly appreciated!

Sorry I'd not properly looked at your code before commenting. For some reason the delete comment button doesn't want to do anything. — James Donnelly, May 01 '15 at 19:57
The ajax call is asynchronous. See: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call for ways to deal with that. — John S, May 01 '15 at 20:00

Transcendence · Accepted Answer · 2015-05-01T20:02:06.957

4

You don't return anything from getUserInfo so you shouldn't expect anything from it.

You are only returning something in the success callback function. That is is run asynchronously. It doesn't return anything for getUserInfo.

If you want to make your ajax call a separate function you can make it return a promise from $.ajax instead of using a success callback.

function getUserInfo(mapID){
    return $.ajax({
        url: user_url,
        type: "GET",
        cache: true,
        dataType: "json",
        statusCode: {
            404: function () {
                handleError404("Error 404 at getUserInfo();")
            },
            500: function () {
                handleError500("Error 500 at getUserInfo();")
            },
        }
    });
}

then in main.js

var promise = getUserInfo('2');
promise.done(function(userObj) {
  console.log(userObj);
  console.log(userObj.name);
});

edited May 01 '15 at 20:02

answered May 01 '15 at 19:54

Transcendence

2,616
3
21
31

What do you mean I don't? return obj; is there to return it? – BaconJuice May 01 '15 at 19:55
let me expand my answer – Transcendence May 01 '15 at 19:56
Thank you for the sample and explanation! Works perfect. – BaconJuice May 01 '15 at 20:35

Garis M Suero · Answer 2 · 2015-05-01T20:01:57.610

You are not returning anything.

The success callback function in the $.ajax() call is invoked asynchronously, meaning it is executed after the HTTP request is done.

Also, it is a different function than getUserInfo. At this point you are just returning a value for the success function.

I will suggest using another function that will process whatever you receive in the success call. SO in your successs call you get to add a line like handleObject(obj)

score 0 · Answer 3 · answered May 01 '15 at 20:00

You need to pass as function argument a callback or a promise.

Reason is simple. You are calling an ajax call, which will be finished after your function will end it's call. That is why you need to add a callback/promise.

function getUserInfo(mapID, callback){
    var jqxhr = $.ajax({
        url: user_url,
        type: "GET",
        cache: true,
        dataType: "json",
        statusCode: {
            404: function () {
                handleError404("Error 404 at getUserInfo();")
            },
            500: function () {
                handleError500("Error 500 at getUserInfo();")
            },
        },
        success: function (data) {
            console.log(data);
            var obj = {
                name: data.name,
                age: data.age,
                weight: data.weight
            }
            callback(obj);
        }
    });
}

In order to execute your function you simply call:

getUserInfo(manId, function(object){
   console.log('AJAX results');
});

Unable to read returned Javascript object from a different script file

3 Answers3