Code only works if I alert out before the code that's bombing out?

Question

This is just freakin weird to me. So if I don't

    function BindAlbumAndPhotoData()
    {
        // Get an array of all the user's Albums
        var aAlbums = GetAllAlbums(userID, token);

        alert("aAlbums: " + aAlbums);
        if (aAlbums == null || aAlbums == "undefined")
            return;

        // Set the default albumID
        var defaultAlbumID = aAlbums[0].id;

    };

So I get an undefined error on the line var defaultAlbumID = aAlbums[0].id; if I don't uncomment the alert("aAlbums: " + aAlbums);

what the heck? If I comment out alert("aAlbums: " + aAlbums); then I get an undefined for the var defaultAlbumID = aAlbums[0].id;

This is so weird. I've been working all night to figure out why I kept getting an undefined for the aAlbum[0] and as soon as I add back an alert that I used to have above it, all is fine...makes no sense to me.

Here's the full code of GetAllAlbums:

function GetAllAlbums(userID, accessToken)
{
    var aAlbums = []; // array
    var uri = "/" + userID + "/albums?access_token=" + accessToken;

    alert("uri: " + uri);

    FB.api(uri, function (response) 
    {
        // check for a valid response
        if (!response || response.error) 
        {
            alert("error occured");
            return;
        }

        for (var i = 0, l = response.data.length; i < l; i++) 
        {
            alert("Album #: " + i + "\r\n" +
                  "response.data[i].id: " + response.data[i].id + "\r\n" +
                  "response.data[i].name: " + response.data[i].name + "\r\n" +
                  "response.data[i].count: " + response.data[i].count + "\r\n" +
                  "response.data[i].link: " + response.data[i].link
                  );

            aAlbums[i] = new Album(
                                                    response.data[i].id,
                                                    response.data[i].name,
                                                    response.data[i].count,
                                                    response.data[i].link
                                                   );

            alert("aAlbums[" + i + "].id : " + aAlbums[i].id);
        }
    });

    return aAlbums;
}

so I'm not returning the array until I hit the callback of the FB.api async call so I don't see how my defaultAlbumID = aAlbums[0].id; line of code is executing before I have a valid array of data back. When I put in the alert, ovbvioulsly it's delaying before it hits my line defaultAlbumID = aAlbums[0].id; causing it to I guess luckily have data beacuse the async FB.api call is done but again I don't see how that's even possible to have an issue like this when I'm waiting for the call before proceeding on and returning the array to aAlbums in my BindAlbumAndPhotoData() method.

UPDATE #3

            function BindAlbumAndPhotoData()
            {
                GetAllAlbums(userID, accessToken, function (aAlbums) 
                {
                    alert("we're back and should have data");

                    if (aAlbums === null || aAlbums === undefined) {
                        alert("array is empty");
                        return false;
                    }

                    var defaultAlbumID = aAlbums[0].id;

                    // Set the default albumID
                    var defaultAlbumID = aAlbums[0].id;

                    // Bind the album dropdown
                    alert(" defaultAlbumID: " + defaultAlbumID);

                 });
            };


function GetAllAlbums(userID, accessToken, callbackFunctionSuccess)
{
    var aAlbums = []; // array
    var uri = "/" + userID + "/albums?access_token=" + accessToken;

    FB.api(uri, function (response) 
    {
        // check for a valid response
        if (!response || response.error) 
        {
            alert("error occured");
            return;
        }

        for (var i = 0, l = response.data.length; i < l; i++) 
        {
            alert("Album #: " + i + "\r\n" +
                  "response.data[i].id: " + response.data[i].id + "\r\n" +
                  "response.data[i].name: " + response.data[i].name + "\r\n" +
                  "response.data[i].count: " + response.data[i].count + "\r\n" +
                  "response.data[i].link: " + response.data[i].link
                  );

            aAlbums[i] = new Album(
                                                    response.data[i].id,
                                                    response.data[i].name,
                                                    response.data[i].count,
                                                    response.data[i].link
                                                   );

            alert("aAlbums[" + i + "].id : " + aAlbums[i].id);
        }

        // pass the array back to the callback function sent as a param to the GetAllAlbums method here
        callbackFunctionSuccess(aAlbums); 
    });
}

It's not hitting my alert in the callback. I must still be doing something wrong here.

UPDATE #4 - for some reason it's not hitting my FB.api callback now.

function GetAllAlbums(userID, accessToken, callbackFunctionSuccess)
{
    var aAlbums = []; // array
    var uri = "/" + userID + "/albums?access_token=" + accessToken;

    alert("uri: " + uri);

    FB.api(uri, function (response) 
    {
        // check for a valid response
        if (!response || response.error) 
        {
            alert("error occured");
            return;
        }

        for (var i = 0, l = response.data.length; i < l; i++) {
            alert("Album #: " + i + "\r\n" +
                  "response.data[i].id: " + response.data[i].id + "\r\n" +
                  "response.data[i].name: " + response.data[i].name + "\r\n" +
                  "response.data[i].count: " + response.data[i].count + "\r\n" +
                  "response.data[i].link: " + response.data[i].link
                  );

            aAlbums[i] = new Album(
                                                    response.data[i].id,
                                                    response.data[i].name,
                                                    response.data[i].count,
                                                    response.data[i].link
                                                   );

            alert("aAlbums[" + i + "].id : " + aAlbums[i].id);
        }

        alert("about to pass back the array to the callback function");
        // pass the array back to the callback function sent as a param to the GetAllAlbums method here
        callbackFunctionSuccess(aAlbums);
    });
}

Answer 1

Try modifying your condition like this:

  if (typeof aAlbums == 'undefined')
      return;

Also make sure that aAlbums has values and is an array:

alert(aAlbums.length);

Or:

for(var i = 0; i < aAlbums.length; i++)
{
  alert(aAlbums[i].id);
}

Answer 2

function BindAlbumAndPhotoData()
{
    // Get an array of all the user's Albums
    GetAllAlbums(userID, token, function(aAlbums){

        // Set the default albumID
        var defaultAlbumID = aAlbums[0].id;

    });

};

and then in the GetAllAlbums function call the success function when you have the data back

//*** AFTER THE BREAK *//

In response to the updated question: The FB API is mostly asynchronous, and will keep executing other code while it waits. So using your code, all I have done is passed in the function, and then call the function you've passed it at the end

function GetAllAlbums(userID, accessToken, funcSuccess)
{
    var aAlbums = []; // array
    var uri = "/" + userID + "/albums?access_token=" + accessToken;

alert("uri: " + uri);

FB.api(uri, function (response) 
{
    // check for a valid response
    if (!response || response.error) 
    {
        alert("error occured");
        return;
    }

    for (var i = 0, l = response.data.length; i < l; i++) 
    {
        alert("Album #: " + i + "\r\n" +
              "response.data[i].id: " + response.data[i].id + "\r\n" +
              "response.data[i].name: " + response.data[i].name + "\r\n" +
              "response.data[i].count: " + response.data[i].count + "\r\n" +
              "response.data[i].link: " + response.data[i].link
              );

        aAlbums[i] = new Album(
                                                response.data[i].id,
                                                response.data[i].name,
                                                response.data[i].count,
                                                response.data[i].link
                                               );

        alert("aAlbums[" + i + "].id : " + aAlbums[i].id);



    }

    funcSuccess(aAlbums);
});

}

Answer 3

Try three equals signs instead of two, and also... return false rather than nothing at all.

if (aAlbums === null || aAlbums === undefined)
            return false;

Also, undefined doesn't need to be in quotes, otherwise, it's just considered a string with a value of "undefined"

On an added note, it's probably better to ALSO check if aAlbums is actually an array before you decide to return a key from it.

if (   aAlbums === null 
    || aAlbums === undefined
    || (typeof(aAlbums)=='object'&& !(aAlbums instanceof Array))
    } return false;

Answer 4

Is your function GetAllAlbums() doing some HTTP requests? If so then you need to either make that call synchronous or you need to put your code into a function and pass that as a callback to the Ajax request.