Javascript for loop not looping через array

Question

Я пытаюсь прочитать в файле TMX для уровня платформы. Я пытался нарисовать тайник, чтобы посмотреть, работает ли мой код. Это, как я загрузить карту:

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(); 
    } 
}; 

Однако, цикл, который должен пройти через массив слоев карты, не цикл вообще. Когда я пытаюсь нарисовать первый слой карты в массиве с помощью этого:

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

он рисует Tileset образ, но он дает эту ошибку:

TypeError: this.mapLayers[0] is undefined 

Кто-нибудь знает, почему это происходит? Если вы хотите, вы можете найти файл TMX здесь: http://pastebin.com/MYdJCHfQ

Answer 1

Похоже, что mapLayers - это массив, который вы хотите перебрать, но вам не хватает его свойства length, чтобы передать цикл, когда прекратить цикл. Возможно, это помогло бы:

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