Javascript function returns undefined

Question

I have four functions that handle a certain part of my app for getting a photo url.

In the function handleGetPhotoResponse the alert has my url in it, everything looks like it should.

The problem is in the function handleGetUsersFurKidsResponse. the variable "fkimg" is undefined. Can anyone tell me where I went wrong?

To use this part of the app I make a call to "getUsersFurKids".

function handleGetPhotoResponse(responseText, size) {
    var photoDetails = JSON.parse(responseText);
    var thePhoto = photoDetails[size];
    alert(thePhoto);
    return thePhoto;
}

function getPhoto(id, size) {
    var url = "url-removed"+id;
    var request = new XMLHttpRequest();
    //Send the proper header information along with the request
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            return handleGetPhotoResponse(request.responseText, size);
        }
    };
    request.send(null);
}

// function to handle the response of getting a users fur kids
function handleGetUsersFurKidsResponse(responseText) {
    var ul = document.getElementById("furKidList");
    var furKids = JSON.parse(responseText);
    for(var i = 0; i<furKids.length; i++){
        var li = document.createElement("li");
        var fkimg = getPhoto(furKids[i].ui_id, 'small');
        li.innerHTML = "<a href=\"\"><img src=\""+fkimg+"\"> "+furKids[i].p_name;
        ul.appendChild(li);
    }
}

// function to get a users fur kids
function getUsersFurKids(id) {
    // api url for getting fur kids
    var url = "url-removed"+id;
    var request = new XMLHttpRequest();
    //Send the proper header information along with the request
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            handleGetUsersFurKidsResponse(request.responseText);
        }
    };
    request.send(null);
}

Answer 1

         // receive a callback---v
function getPhoto(furKid, size, callback) {
         //         ^---and the current furKid

        // use the ui_id------------v
    var url = "url-removed" + furKid.ui_id;
    var request = new XMLHttpRequest();

    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {

         // Invoke the callback, and pass it the result of handleGetPhotoResponse
            callback(handleGetPhotoResponse(request.responseText, size), furKid.p_name);
                     // use the p_name-----------------------------------------^
        }
    };
    request.send(null);
}

function handleGetUsersFurKidsResponse(responseText) {
    var ul = document.getElementById("furKidList");
    var furKids = JSON.parse(responseText);
    for(var i = 0; i<furKids.length; i++){

            // pass a callback-----------------v
        getPhoto(furKids[i], 'small', function(fkimg, p_name) {
            var li = document.createElement("li");
            li.innerHTML = "<a href=\"\"><img src=\""+fkimg+"\"> "+ p_name;
            ul.appendChild(li);
        });
    }
}

Answer 2

You don't seem to understand that getPhotos is an asynchronous function. The onload handler inside it is called sometime LATER long after the getPhoto function itself returns and is finished. As such, you CANNOT return a value from getPhoto that was retrieved in onload.

Instead, you have to put all code that needs to use the onload response from getPhoto inside of the onload handler itself (or called from inside the onload handler) because ONLY when the onload handler is called is that data known.

This is how asynchronous programming works in javsacript.

Add a callback to getPhoto and call that callback from inside the onload handler, passing it the img that you got from the async call. Then, and only then, can you use that img data.