Javascript for loop not looping through array

Question

I am trying to read in a TMX file for a platformer level. I was trying to draw the tileset to see if my code was working. This is how I load the map:

function TileMapLayer(mapWidth, mapHeight, tileWidth, tileHeight, layerName, tileData) {
'use strict';
    var name = layerName,
    width = mapWidth, height = mapHeight,
    // An array of integers used to figure out whether there is a tile in the
    // player's position
    map = [width][height];
    // The tileset that makes up the tilemap
    this.tileSet = Game.res.getImage('tileSet');
    var data = tileData;

    function getWidth() {return width;}
    function getHeight() {return height;}
}

TileMapLayer.prototype.draw = function() {
        'use strict';
    ctx.beginPath();
    ctx.drawImage(this.tileSet, canvasWidth / 2, canvasHeight / 2);
    ctx.closePath();
};

function TileMap() {
    'use strict';
    this.mapLayers = [];
}

TileMap.prototype.loadFile = function(pathToFile) {
    'use strict';
    var xhr = new XMLHttpRequest();
    var that = this;
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            // read in xml file
            var domParser = new DOMParser();
            var mapData = domParser.parseFromString(xhr.responseText, 'text/xml');
            var mapAttributes = mapData.getElementsByTagName('map')[0].attributes;
            // get tileset location
            var tileSet = mapData.getElementsByTagName('tileset')[0].getElementsByTagName('image')[0].attributes;
            Game.res.addImage('tileSet', '/home/agoston/Documents/js/platformer/res/maps/' + tileSet.getNamedItem('source').nodeValue);
            // get map & tile dimensions
            that.width = parseInt(mapAttributes.getNamedItem('width').nodeValue);
            that.height = parseInt(mapAttributes.getNamedItem('height').nodeValue);
            that.tileWidth = parseInt(mapAttributes.getNamedItem('tilewidth').nodeValue);
            that.tileHeight = parseInt(mapAttributes.getNamedItem('tileheight').nodeValue);

            // get layer data
            var layers = mapData.getElementsByTagName('layer');

            // create layers
            for(var i = 0; i < layers.length; ++i) {
                that.mapLayers[i] = new TileMapLayer(that.width, that.height, 
                                                                    that.tileWidth, 
                                                                    that.tileHeight,
                                                                    layers[i].attributes.getNamedItem('name').nodeValue,
                                                                    layers[i].getElementsByTagName('data')[0]);
            }

        }
    };
    xhr.open('GET', pathToFile, true);
    xhr.send(null);
};

TileMap.prototype.draw = function() {
    // this block of code doesn't execute
    for(var i = 0; i < this.mapLayers; ++i) {
        console.log('drawing map layers');
        this.mapLayers[i].draw();
    }
};

However, the loop that is supposed to go through the array of map layers, doesn't loop at all. When I try to draw the first map layer in the array using this:

TileMap.prototype.draw = function() {
    this.mapLayers[0].draw();
};

it draws the tileset image, but it gives this error:

TypeError: this.mapLayers[0] is undefined

Does anyone know why this is happening? If you wish, you can find the TMX file here: http://pastebin.com/MYdJCHfQ

Answer 1

It seems like the mapLayers is an array that you want to iterate over, but you are missing its length property to tell the loop when to stop looping. Perhaps this would help:

for(var i = 0, j = this.mapLayers.length; i < j; ++i) {
        console.log('drawing map layers');
        this.mapLayers[i].draw();
    }