javascript variable is undefined

Question

I'm writing a small Flickr image grabber app, and we have a JSON proxy on our own servers. The function below grabs the images from a photoset given the id.

function getPhotosFromPhotoset(p_id) {
    var data;
    $.getJSON('/flickr_get_photos', {
        photoset_id: p_id
    }, function(res) {
        data = res;
        console.log("res: " + JSON.stringify(data));
        if (res.status == 'ok') {
            if (res.data.length > 0) {
                //nada                                                                                                                            
            } else {
                data.status = "error: Photoset has no photos.";
            }
        } else {
            data.status = "An unknown error occurred; please try again.";
        }
    });
    return data; //undefined?!
}

Why is does data suddenly become undefined? When I console.log it inside of the getJSON, it's perfectly valid.

Esailija · Accepted Answer · 2012-07-11 17:53:58Z

4

The function returns long before the ajax request is even made. Use data in the callback function (You are actually logging it in the callback function, where it's guaranteed to be available ). The $.getJSON doesn't take callback function just for fun, but exactly for this reason.

You can do this though:

function getPhotosFromPhotoset(p_id) {
    return $.getJSON('/flickr_get_photos', {
        photoset_id: p_id
    });
}

getPhotosFromPhotoset(1).then(function(data) {
    //Use data here
});

Instead of trying to do:

var data = getPhotosFromPhotoset(1); //will not work

Which will not work unless you set the request to synchronous, which has worse problems.

edited Jul 11, 2012 at 17:53

answered Jul 11, 2012 at 17:42

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

Comments

JaredMcAteer · Accepted Answer · 2012-07-11 17:43:24Z

2

It doesn't suddenly become undefined. getJson is an asynchronous call, the function that sets the data value is what gets call when the server returns a response, getPhotosFromPhotoset doesn't wait for the server to respond before completing execution and thus the data value has not been set with anything yet.

answered Jul 11, 2012 at 17:43

JaredMcAteer

22.7k5 gold badges52 silver badges68 bronze badges

3 Comments

tekknolagi Over a year ago

How can I make it wait for the call to finish?

JaredMcAteer Over a year ago

You don't want to, synchronous server side calls block page functions. You need to refactor the function that calls the getPhotosFromPhotoset function to expect a call back and not a return value.

tekknolagi Over a year ago

I'm confused as to how I'd use a callback... what do you mean?

Justin Ethier · Accepted Answer · 2012-07-11 17:45:18Z

1

AJAX executes asynchronously, so when you say:

return data; //undefined?!

That code is executing before the code in function (res), which is why data is undefined. If you want to do something with the data, you need to pass a callback function to getPhotosFromPhotoset which will be executed by the success callback of getJSON.

Does that make sense?

answered Jul 11, 2012 at 17:45

Justin Ethier

135k53 gold badges235 silver badges291 bronze badges

Collectives™ on Stack Overflow

javascript variable is undefined

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related