jQuery -- Variable string printed as one word - ajax

Question

I am writing some jquery that will grab an array of xml files. It then will loop through these and parse through them to show them on the page. I have this working but one thing I would like to do if before it lists out the contents, I want it to print the name of the file. Here is the code I have.
$.get('inc/getMenuFiles.php', function(data) {
var catSplit = data.split(",");
var menuitems = $('.menuitems');
menuitems.empty();
for (i=2; i<catSplit.length; i++) {
url = "inc/menulists/" +catSplit[i].replace(/"/g, '').replace(/]/g, '');
catName = catSplit[i].replace(/"/g, '').replace(/.xml/g, '').replace(/]/g, '');
menuitems.append(catName);
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
var name = $(this).find('name').text();
var price = $(this).find('price').text();
menuitems.append(name + " - $" +price + "<br />");
});
}
});
}
});
This is not valid but if I do this it works
$.ajax({
type: "GET",
url: url,
async: true,
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
var name = $(this).find('name').text();
var price = $(this).find('price').text();
menuitems.append(name + " - $" +price + "<br />");
});
}
}).delay();
So I guess I just need to properly add a delay, after that ajax call

Answer 1

This is happening because your Ajax callbacks won't execute until the current execution path finishes. To get around this you can wait until inside your ajax callback to append catName. This should work:
$.get('inc/getMenuFiles.php', function(data) {
var catSplit = data.split(",");
var menuitems = $('.menuitems');
menuitems.empty();
for (i=2; i<catSplit.length; i++) {
url = "inc/menulists/" +catSplit[i].replace(/"/g, '').replace(/]/g, '');
catName = catSplit[i].replace(/"/g, '').replace(/.xml/g, '').replace(/]/g, '');
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: (function(catName){
return function(xml) {
menuitems.append(catName);
$(xml).find('item').each(function(){
var name = $(this).find('name').text();
var price = $(this).find('price').text();
menuitems.append(name + " - $" +price + "<br />");
});
}
})(catName)
});
}
});
You still (just like in your original code) have no guarantee on the order your requests could complete, so sometimes appetizers.xml and beer.xml will load in the reverse order.

Answer 2

This is happening because your for-loop is faster than the AJAX call. Remember that the first A in AJAX stands fro asynchronous. Picture this...
You're at the beginning of your for-loop. You take take the first catName, and append it to menuitems. Then you fire up an AJAX call to fetch the name and price of each item in the catName. Meanwhile, the AJAX request hasn't responded yet, so we move one to the second catName, fire up another AJAX request. The first one isn't done, and we just fired a second request; so now we have 2 AJAX responses pending. In the meantime, we move on the third catName.
And so on, and so forth...
Solutions
Set the async property in your inner AJAX call to false. This will make the for-loop pause until the request is completed.
** PREFERRED ** Make your AJAX calls before the for-loop, store the response somewhere (in an array perhaps), than run your for-loop using this array.