Windows 8 Javascript app XML Object

I'm currently trying to make a HTML/JavaScript Windows 8 modern application in which I want to access a local XML file that is in the installation directory. After reading many ideas and code snippets around the web, I came up with a convoluted asynchronous method of accessing the file, which works. However, is this the best/correct way to do something as simple as accessing a local XML file? Additionally, I'd like to be able to have a function load the xml file, and save the XMLDocument object as a "global" variable, so that on button presses and other triggers, the XMLDocument object can be accessed and parsed. This is where all the problems start, since one method is async, and then the variables are undefined, etc....

(function () {
"use strict";

WinJS.UI.Pages.define("/pages/reader/reader.html", {
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {
        // TODO: Initialize the page here.
        var button = document.getElementById("changeText");
        button.addEventListener("click", this.buttonClickHandler, false);
        var dropdown = document.getElementById("volumeDropdown");
        dropdown.addEventListener("change", this.volumeChangeHandler, false);
        var loadSettings = new Windows.Data.Xml.Dom.XmlLoadSettings;
        loadSettings.prohibitDtd = false;
        loadSettings.resolveExternals = false;

        //previous attempt, also didn't work:
        //this.xmlDoc = null;
        //this.loadXMLdoc(this, this.testXML);

        //also not working:
        this.getXmlAsync().then(function (doc) {
            var xmlDoc = doc;
        });

        //this never works also, xmlDoc always undefined, or an error:
        //console.log(xmlDoc);            
    },
    buttonClickHandler: function (eventInfo) {
        // doesn't work, xmlDoc undefined or error:
        console.log(xmlDoc);
    },
    volumeChangeHandler: function (eventInfo) {
        var e = document.getElementById("volumeDropdown");
        // of course doesn't work, since I can't save the XMLDocument object into a variable (works otherwise):
        var nodelist2 = xmlDoc.selectNodes('//volume[@name="volumeName"]/chapter/@n'.replace('volumeName', list[0]));
        var volumeLength = nodelist2.length;
        for (var index = 0; index < volumeLength; index++) {
            var option = document.createElement("option");
            option.text = index + 1;
            option.value = index + 1;
            var volumeDropdown = document.getElementById("chapterDropdown");
            volumeDropdown.appendChild(option);
        }
    },
    getXmlAsync: function () {
        return Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync("books").then(function (externalDtdFolder) {
            externalDtdFolder.getFileAsync("book.xml").done(function (file) {
                return Windows.Data.Xml.Dom.XmlDocument.loadFromFileAsync(file);
            })
        })
    },
    loadXMLdoc: function (obj, callback) {
        var loadSettings = new Windows.Data.Xml.Dom.XmlLoadSettings;
        loadSettings.prohibitDtd = false;
        loadSettings.resolveExternals = false;
        Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync("books").then(function (externalDtdFolder) {
            externalDtdFolder.getFileAsync("book.xml").done(function (file) {
                Windows.Data.Xml.Dom.XmlDocument.loadFromFileAsync(file, loadSettings).then(function (doc) {

                    var nodelist = doc.selectNodes("//volume/@name");
                    var list = [];
                    for (var index = 0; index < nodelist.length; index++) {
                        list.push(nodelist[index].innerText);
                    };
                    for (var index = 0; index < list.length; index++) {
                        var option = document.createElement("option");
                        option.text = list[index] + "new!";
                        option.value = list[index];
                        var volumeDropdown = document.getElementById("volumeDropdown");
                        volumeDropdown.appendChild(option);
                    };
                    var nodelist2 = doc.selectNodes('//volume[@name="volumeName"]/chapter/@n'.replace('volumeName', list[0]));
                    var volumeLength = nodelist2.length;
                    for (var index = 0; index < volumeLength; index++) {
                        var option = document.createElement("option");
                        option.text = index + 1;
                        option.value = index + 1;
                        var volumeDropdown = document.getElementById("chapterDropdown");
                        volumeDropdown.appendChild(option);
                    };


                    obj.xmlDoc = doc;
                    callback(obj);

                })
            })
        });
    },
    initializeXML: function (doc, obj) {
        console.log("WE ARE IN INITIALIZEXML NOW")
        obj.xmlDoc = doc;
    },
    testXML: function (obj) {
        console.log(obj.xmlDoc);
    },


});

})();

In summary with all these complicated methods failing, how should I go about doing something as simple as loading an XML file, and then having it available as an object that can be used by other functions, etc.?

Thanks for your help!

PS: I'm very new to JavaScript and Windows 8 Modern Apps/ WinAPIs. Previous experience all in Python and Java (where doing this is trivial!).