XML Document "undefined" in JavaScript

Question

I'm working on an HTML5 implementation of a game idea I'm playing with. Part of this, naturally, is storing the content, among which is the data for different abilities in the game, as well as characters and such.

While dynamic content, such as specific characters, will be moved later on, I will probably stick to XML for static content, such as stats for abilities and gear, which means I'd prefer fixing the issues I'm having with XML as soon as possible.

Now, to do this, I'm loading in XML documents at the beginning of a combat phase, first the character, then the abilities etc relevant to this character.

To do this, I have a "loadXMLFile" function, that takes a filename:

var loadXMLFile = function(filename) {
  req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    return req.responseXML;
  }
  req.open("GET", filename, true);
  req.send();
}

An example of loading and manipulating the data:

function Character(id) {
  doc = loadXMLFile("characters.xml");
  characters = doc.getElementsByTagName("Character");

My intention with this was to make the function call wait for the return value before continuing. As you may be able to tell from the title of the question, this does not work. Instead, as soon as I attempt to manipulate the data, the third line in the example, I receive the following runtime error: Uncaught TypeError: Cannot call method 'getElementsByTagName' of undefined

As the example shows, I load these XML files in my constructors, using the XML file to populate the class. Hence, a structure of calling a different function inside the readystatechange event handler is less than preferable. Am I forced to repeat the XML loading code everywhere I do this, just to make separate event handlers?

Mike · Accepted Answer · 2011-07-19 23:30:22Z

1

I would suggest to use jQuery or another javascript framework. It's much easier to handle problems like this and you will save a lot of time and code lines. Another problem is the cross-browser compatibility which is not given in your code.

answered Jul 19, 2011 at 23:30

Mike

1446 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ariel · Accepted Answer · 2011-07-19 23:30:25Z

0

You want to change:

req.open("GET", filename, true);

To:

req.open("GET", filename, false);

To make a synchronous request (which means wait for the request before continuing.)

You can not return something from onreadystatechange, that part of your code is wrong.

And you are not checking what the actual state is in that function, so that's wrong too.

So basically your code is not correct at all. I would suggest finding a tutorial site for XMLHttpRequest and copying their code.

As a side note, why are you making life hard for yourself? Install jQuery and let it do all this stuff for you.

And a final note, json is a LOT easier to work with than xml, you may want to switch to that.

answered Jul 19, 2011 at 23:30

Ariel

26.8k5 gold badges62 silver badges71 bronze badges

1 Comment

SimonPip Over a year ago

For the true/false thing, the code was actually wrong here, I had used false in my own code. Turns out I should've read up on why the examples for XML and JS did what they did. I've moved the return value to after the send(), and now I'm getting a similar error, however instead of "undefined", the doc variable is "null". It's as much a learning experience wrt JS as it is to actually get the game built, though jQuery does seem to be something companies want as well.

nk468 · Accepted Answer · 2011-12-26 05:33:23Z

The piece of code that was mentioned is browser specific issue. You should ideally be using the cross-browser compatible javascript based frameworks. You can avoid most of the cross-browser related issues.

Coming to resolution of your issue, getElementsByTagName function is not available within the doc element. So, you can modify the code in the following manner,

if(doc.getElementsByTagName){
     characters = doc.getElementsByTagName("Character");
}

But this will only avoid the error but will not resolve the issue of getting the Character element.

The best option would be to convert the XML to JSON in the server and send the JSON to the client. It is easy to traverse through the JSON easily and there are no cross-browser issues.

One can traverse through the JSON easily as follows,

function traverseJSON (jsonObj){
    for(var value in jsonObj){
        if(typeof value == 'function'){//this is to avoid 'remove' function in case of Array, Array object will be available in case of repeating elements in XML. 
            continue;
        }else if(typeof value == 'object'){ //refers to element in XML 
            traverseJSON(value);
        }else if(typeof value== 'string'){   //refers to attribute in XML
        jsonObj[value]; //refers to the attribute value in XML
        }
    }
}

The above function can be used to traverse through the JSON, which takes JSON object as the input.

Collectives™ on Stack Overflow

XML Document "undefined" in JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related