Question

I’m developing a HTML5/Canvas game engine and I’m stuck. The engine draws the map via tilesets, and reads the map data from an XML document, which looks like this:

<map>
    <layer id="-1">
        <row>0,0,0</row>
        <row>1,1,1</row>
        <row>0,0,0</row>
    </layer>

    <layer id="1">
        <row>0,0,0</row>
        <row>1,1,1</row>
        <row>0,0,0</row>
    </layer>
</map>

And the JavaScript which loads the data in a 2-dimensional array:

var layers = xml.getElementsByTagName("layer");
for(var i in layers)
{
    var rows = layers[i].childNodes;
    for(var j in rows)
    {
        array[i][j] = rows[j].nodeValue;
    }   
}

The problem: the returned data is just a mishmash of "null", "", and "undefined". Also, the array seems to be smaller then necessary, because before I go through all the values I check the number of nodes (with the length attribute), and it’s always more then the actual number of nodes.

Answer 1

1. Use textContent instead of nodeValue. The former returns the correct value such as "0,0,0".
2. Since text nodes are also child nodes, you should skip them (check the node’s nodeType). These are filling your array with holes, and making them larger than needed. The text nodes are basically the whitespace of the indenting. Solving this will require an additional counter.
3. Use a normal for loop, not a for in loop.

http://jsfiddle.net/DhKJr/