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);
        });
    }
}