Returning an Array of Objects (returns undefine)

Question

I'm running two javascript functions. One gets info from an XML to return an object of arrays using jquery. The other updates the html page with the new content received from the previous function. However, the return value keeps coming back as undefined. I'm lost to why this is happening.

Here is my code. Any help will be appreciated. Thank you.

function getSpellList(fileLocation) {

    var SpellList = new Array();

    $(document).ready(function(){ 
        // Open the XML file
        $.get(fileLocation,{},function(xmlFile){            

            // Run the function for each Spell tag in the XML file
            $('Spell',xmlFile).each(function(i) {
                var SPELL = new Object();

                SPELL.Name = $(this).find("Name").text();
                SPELL.Description = $(this).find("Description").text();
                SPELL.COST = $(this).find("COST").text();

                SpellList.push(SPELL);
            });
            return SpellList;
        });
    });
}

function updateContent() {

    var ListSpell = getSpellList("./xml/List_Spells.xml");
    var ListAnimi = getSpellList("./xml/List_Animi.xml");

    var HTML = '';

    for(xi=0; xi<ListSpell.length; xi++){
        HTML += SpellToHTML(ListSpell[xi]);
    }

    for(xi=0; xi<ListAnimi.length; xi++){
        HTML += SpellToHTML(ListAnimi[xi]);
    }

    // Update the DIV called Content Area with the HTML string
    $("#ContentArea").append(HTML);
}