Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I hope this is not too much of a newbe question but I've been pulling my hair out for a while now so thought I'd give in and ask for my first piece of advice on here.

I'm trying to read an external xml file using javascript / jQuery / ajax and place the retrieved data into an array so that I can then reference it later.

So far I seem to be doing everything right upto the point I put the data into the array but then I'm struggling to to read the data anywhere other than inside the function where I create it. Why am I not able to access the Array from anywhere other than in that function?

Here is my code... Please help!!

$.ajax({
    type: "GET",
    url: "data.xml",
    dataType: "xml",
    success: do_xmlParser
});

function do_xmlParser(xml)
{
    var myArray = new Array();

    $(xml).find("tag").each(function ()
    {
        myArray.push($(this).find("innerTag").text());
    });

    console.log("inside "+myArray); // This outputs the array I am expecting

    return myArray; // is this right???
}
console.log("outside: "+myArray); // This does NOT output the array but instead I get "myArray is not defined"
share|improve this question

2 Answers

up vote 2 down vote accepted

You're defining do_xmlParser as a callback to an asynchronous function (success of the jquery ajax call). Anything you want to happen after the ajax call succeeds has to occur within that callback function, or you have to chain functions from the success callback.

The way you have it now, the actual execution of code will go:

ajax -> file being requested -> console.log -> 
        file transfer done -> success handler

If you're doing some critical stuff and you want the call be to synchronous, you can supply the
async : false
setting to the ajax call. Then, you should be able to do something like this:

var myArray = [],
do_xmlParser = function (xml)
{
    $(xml).find("tag").each(function ()
    {
        myArray.push($(this).find("innerTag").text());
    });
};

$.ajax({
    type: "GET",
    url: "data.xml",
    dataType: "xml",
    success: do_xmlParser,
    async: false
});

console.log("outside: " + myArray);

The async option doesn't work for cross-domain requests, though.

NOTE
I don't recommend doing this. AJAX calls are supposed to be asynchronous, and I always use the success callback to perform all of the processing on the returned data.

Edit:

Also, if you're into reading... I'd recommend jQuery Pocket Reference and JavaScript: The Definitive Guide (both by David Flanagan).

share|improve this answer
 
Great!! I can't believe such a small change fixed this headache! Incidentally, (sorry to digress to a slightly different point but) what are the risks to doing it this way or is it just for personal preference that you don't? –  Duck in Custard Aug 27 '11 at 23:47
 
AJAX is supposed to make everything asynchronous, or non-blocking. By forcing the request to be synchronous, all other scripts on your page will block, i.e. not run until this is completed. If you have this running when the DOM is ready, it may even cause images to wait until this code completes before they finish loading. If your xml file is huge, or takes a long time to finish transferring, you may see an error about an unresponsive script (depending on your browser). At the very least, I'd put this code closer to the end of your dom's ready callback. –  Jim Schubert Aug 27 '11 at 23:59
 
Thank you. I'm tired and off to bed now but will see if I can't rewrite the code tomorrow –  Duck in Custard Aug 28 '11 at 0:06
 
With that in mind. Do you have any tips on how I might write this better? Or should I be staying clear of the 'xml into array' idea all together? (which may explain why there appears to be a complete lack of tutorials on that method when searching Google!) –  Duck in Custard Aug 28 '11 at 0:32
 
As an example, check out the source for a quake tracker I wrote: github.com/jimschubert/quaketracker/blob/master/src/js/… You'll see that everything requiring the data loaded from xml is performed by the success callback (e.g. inside that handler, I call addMarker). –  Jim Schubert Aug 28 '11 at 3:32
show 1 more comment
up vote 0 down vote

look close and you will see. You are actually firing up an array that dosen't exist. You have declared myArray inside function. Try do something like this.

console.lod("outside :"+do_xmlParser(xml)); // I think that when you merge a string and an array it will output only string, but I can be wrong.
share|improve this answer
 
So where do I declare the Array in order to be able to add to it within the function and then read from it later? –  Duck in Custard Aug 27 '11 at 23:26
 
Actually. This can't be right as inside the function I get the string followed by the array contents. like so: "Inside: 4, 5, 4, 3, 4, 5, 4, 4, 3" etc... –  Duck in Custard Aug 27 '11 at 23:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.