Crossrider Extension API - var blank unless I call alert(var) after setting it? JS scope issue?

Question

I am using a simple get request, similar to the one in the example provided by Crossrider, to get some content from the related site. The content returned should look like this:

"Your list: 1-Item,2-Salmon,3-Halibut";

When I use an alert(); method to display the GET content immediately after retrieving it, everything works great (minus the alert popup everytime I load a webpage). However, I have found that if I remove the alert statement that was in the Crossrider example, the myList var will be blank (see code below).

appAPI.ready(function($) {
    // Async GET Request
    // appAPI.request.get({url, onSuccess, onFailure, additionalRequestHeaders}})
    function get_wishlists(){
        appAPI.request.get({
            url: 'http://mysite.local/list/view/1?time='+$.now(),
            onSuccess: function(response, additionalInfo) {
                myList = String($(response).text());
                return myList;
            },
            onFailure: function(httpCode) {
                //alert('Error - Could not acquire a list of your wishlists. HTTP Code: ' + httpCode);
                return null;
            }
        });
    }
    var myList = get_list();
    // myList will be blank without this!
    alert(myList);
    if (myList.indexOf('Your list:')){
        myList = myList.substr(myList.indexOf('Your list:')+10);
        myList = myList.split(',');
    } else {
        alert('Could not get list from your account, server response: '+myList);
    }
});

My question is, why is myList coming out blank when I don't immediately display it in an alert box, and how can I keep it from doing this?

EDIT: Actually, I don't even have to alert the myList var, but can call alert('got data'); immediately after setting myList.

Answer 1

In general, whenever you see a callback function in JavaScript the code is run asynchronously and the same applies to the Crossrider API callbacks. In your example, the appAPI.request.get onSuccess callback is only called once the data is received, whilst the alert is called immediately after the request is fired and before the data is received.

The correct way to code this is to place the alert in the callback function so that it's called when the data is received. Using your code as an example, it should look something like:

appAPI.ready(function($) {
  function get_wishlists() {
    appAPI.request.get({
      url: 'http://mysite.local/list/view/1?time=' + $.now(),
      onSuccess: function(response, additionalInfo) {
        myList = response;
        alert(myList);
        if (myList.indexOf('Your list:')) {
          myList = myList.substr(myList.indexOf('Your list:') + 10);
          myList = myList.split(',');
        } else {
          alert('Could not get list from your account, server response: ' + myList);
        }
      },
      onFailure: function(httpCode) {
        //alert('Error - Could not acquire a list of your wishlists. HTTP Code: ' + httpCode);
        return null;
      }
    });
  }
  get_wishlists();
});

Additionally (and as an aside). note that your function get_wishlists is never actually called since when setting myList you are calling a different function get_list.

[Disclosure: I am a Crossrider employee]

Answer 2

I just figured this out. The ideal work around for this delay is to do all of my processing only when the request returns successfully. Without doing so, I was risking the rest of the processing continuing before it comes back (which usually happened unless I used alert(); or setTimeout(); to delay the rest of my code from running.