SharePoint List Query JavaScript Variable Access Issue

Question

I am trying to figure out why I cannot access the variable theHeaders outside of the function. I have tried returning it and then calling the function directly and I get a colListItem on defined. I called it like so:

alert(onQuerySucceeded()); and alert(onQuerySucceeded(sender, args));

I get an undefined everytime.

How can I access theHeaders outside of the functions?

What I don't understand is why I can get it to work in an alert() message in the onQuerySucceeded() function but I cannot do something like doucment.write. I get a permissions denied error if I try any other action than alert() JavaScript:

var siteUrl = '/sites/dev/';
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
function retrieveListItems()
{
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('myList');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<Where><IsNotNull><FieldRef Name='Title' /></IsNotNull>  </Where>");
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this,     this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded(sender, args) 
{


    var listItemEnumerator = collListItem.getEnumerator();
    var theHeaders = "";
    while (listItemEnumerator.moveNext()) 
    {
        var oListItem = listItemEnumerator.get_current();
        theHeaders = theHeaders + oListItem.get_item('Title');


    }
    alert(theHeaders);


}
function onQueryFailed(sender, args) 
{
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Answer 1

If you declare the variable at the top of your file (where you declare siteUrl) and you remove the declaration from within your function, you should be able to access it outside of the function. However, that would mean that you're changing the scope of your variable. If you're ok with that, it should work.

Answer 2

Don't use document.write because it's going to destroy your page content. Inject your result into a div is better. Something like :

document.querySelector('#myDiv').innerHTML = theHeaders

By the way, you cannot use alert(onQuerySucceeded()); because onQuerySucceeded() is called asynchronously from retrieveListItems(), so it cannot return a value.