title: Reading Tiled tilemaps as JSON - error
body: <p>I'm following <a href="http://hashrocket.com/blog/posts/using-tiled-and-canvas-to-render-game-screens" rel="nofollow">hashrocket's</a> tutorial on reading Tiled TMX tilemaps as JSON.</p>
  
  <p>When trying to load my saved Tile JSON file, I get</p>
  
  <p><code>Uncaught TypeError: Cannot read property '0' of undefined</code> on line 52, which is:</p>
  
  <pre><code>     this.tileset = $("&lt;img /&gt;", { src: json.tilesets[0].image })[0]
  </code></pre>
  
  <p>in the loadTileset : function(json) function.</p>
  
  <p>Any idea why?</p>
  
  <pre><code>$(function() {
            var c = $("canvas")[0].getContext("2d");
  
            var scene = {
              layers: [],
  
              renderLayer: function(layer) {
  
                if (layer.type !== "tilelayer" || !layer.opacity) { return; }
                var s = c.canvas.cloneNode(),
                    size = scene.data.tilewidth;
                s = s.getContext("2d");
                if (scene.layers.length &lt; scene.data.layers.length) {
                  layer.data.forEach(function(tile_idx, i) {
                    if (!tile_idx) { return; }
                    var img_x, img_y, s_x, s_y,
                        tile = scene.data.tilesets[0];
                    tile_idx--;
                    img_x = (tile_idx % (tile.imagewidth / size)) * size;
                    img_y = ~~(tile_idx / (tile.imagewidth / size)) * size;
                    s_x = (i % layer.width) * size;
                    s_y = ~~(i / layer.width) * size;
                    s.drawImage(scene.tileset, img_x, img_y, size, size,
                                s_x, s_y, size, size);
                  });
                  scene.layers.push(s.canvas.toDataURL());
                  c.drawImage(s.canvas, 0, 0);
                }
                else {
                  scene.layers.forEach(function(src) {
                    var i = $("&lt;img /&gt;", { src: src })[0];
                    c.drawImage(i, 0, 0);
                  });
                }
              },
  
              renderLayers: function(layers) {
                layers = $.isArray(layers) ? layers : this.data.layers;
                layers.forEach(this.renderLayer);
              },
  
              loadTileset: function(json) {
                this.data = json;
                this.tileset = $("&lt;img /&gt;", { src: json.tilesets[0].image })[0]
                this.tileset.onload = $.proxy(this.renderLayers, this);
              },
  
              load: function(name) {
                return $.ajax({
                  url: "maps/" + name + ".json",
                  type: "JSON"
                }).done($.proxy(this.loadTileset, this));
              }
            };
  
            scene.load("area01");
          });
  </code></pre>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>This is my Tiled tilemap JSON data:</p>
  
  <pre><code>{ "backgroundcolor":"#1074cb",
   "height":15,
   "layers":[
          {
           "data":[8, 8, 45, 14, 44, 8, 8, 3, 3, 25, 1, 1, 1, 1, 1, 44, 8, 8, 8, 8, 1, 1, 1, 34, 1, 1, 1, 44, 8, 45, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 54, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 22, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 4, 4, 4, 4, 22, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 13, 1, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 32, 33, 1, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 4, 5, 4, 4, 4, 52, 4, 4, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
           "height":15,
           "name":"background",
           "opacity":1,
           "type":"tilelayer",
           "visible":true,
           "width":20,
           "x":0,
           "y":0
          }, 
          {
           "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 92, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 112, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
           "height":15,
           "name":"foreground",
           "opacity":1,
           "type":"tilelayer",
           "visible":true,
           "width":20,
           "x":0,
           "y":0
          }],
   "orientation":"orthogonal",
   "properties":
      {
  
      },
   "tileheight":32,
   "tilesets":[
          {
           "firstgid":1,
           "image":"..\/..\/melonJS\/data\/img\/map\/area01_level_tiles.png",
           "imageheight":241,
           "imagewidth":640,
           "margin":0,
           "name":"area01_level_tiles",
           "properties":
              {
  
              },
           "spacing":0,
           "tileheight":32,
           "tilewidth":32
          }, 
          {
           "firstgid":141,
           "image":"..\/..\/melonJS\/data\/img\/map\/metatiles32x32.png",
           "imageheight":32,
           "imagewidth":160,
           "margin":0,
           "name":"metatiles32x32",
           "properties":
              {
  
              },
           "spacing":0,
           "tileheight":32,
           "tilewidth":32
          }],
   "tilewidth":32,
   "version":1,
   "width":20
  }
  </code></pre>