title: Uncaught TypeError: Cannot set property '0' of undefined
body: <p>I am using <code>Facebooks Javascript API</code> to import to my website the <code>albums</code> and <code>photos</code> of a Facebook page.</p>
  
  <p>My javascript code looks like this :</p>
  
  <pre><code>&lt;script&gt;
          var albumPhotos = new Array();
          var albumThumbnails = new Array();
          window.fbAsyncInit = function() {
              // init the FB JS SDK 
              FB.init({
                  appId      : '5698434687426',                    // App ID from the app dashboard
                  channelUrl : 'channel.html',                       // Channel file for x-domain comms
                  status     : true,                                 // Check Facebook Login status
                  xfbml      : true                                  // Look for social plugins on the page
              });
  
              // Additional initialization code such as adding Event Listeners goes here
              FB.api('1607099163/albums', function(response) {
                  if(!response || response.error) {
                      // render error
                      alert("Noo!!");
                  } else {
                      // render photos
                      for(var i=0; i&lt;response.data.length; i++){  
                          (function (i) {
                              var albumName = response.data[i].name;
                              var albumCover = response.data[i].cover_photo;
                              var albumId = response.data[i].id;
                              var numberOfPhotos = response.data[i].count
  
                              FB.api(albumId + "/photos", function(response) {
                                  if(!response || response.error) {
                                      // render error
                                      alert("Noo!!");
                                  } else {
                                      for(var k=0; k&lt;numberOfPhotos; k++){
                                           albumThumbnails[i][k] = response.data[k].picture;
                                           albumPhotos[i][k] = response.data[k].source;
                                      }
                                  }
                              }); 
  
  
                              console.log(albumName);
                              FB.api( albumCover, function(response) {
                                  if(!response || response.error) {
                                      // render error
                                      alert("Noo!!");
                                  } else {
                                      // render photos
                                      $(".albums").append('&lt;li&gt;'+
                                          '&lt;a href="#Gallery' + i + '"' + 'data-transition="slidedown"&gt;'+
                                          '&lt;img src= "' + response.picture + '"  /&gt;'+
                                           '&lt;h2&gt;' + albumName + '&lt;/h2&gt;'+
                                           '&lt;p&gt;' + "Number of Photos:  " + numberOfPhotos +'&lt;/p&gt;'+
                                           '&lt;/a&gt;'+
                                           '&lt;/li&gt;')
                                      .listview('refresh');
  
                                      $("#home").after('&lt;div data-role="page" data-add-back-btn="true" id=Gallery'+ i +
                                          ' class="gallery-page"&gt; ' +
                                          ' &lt;div data-role="header"&gt;&lt;/div&gt; ' + ' &lt;div data-role="content"&gt; ' +
                                          ' &lt;ul class="gallery"&gt;&lt;/ul&gt; ' + ' &lt;/div&gt; ' +
                                          ' &lt;/div&gt; ');
  
  
                                  }
                              }); 
                          })(i);                                      
                      } //end of for loop
                  }
              });
  
          };
  </code></pre>
  
  <p>As you can see in the beginning i use the API to get information about the <code>albums</code> of the specific page :  <code>FB.api('169070991963/albums', function(response) {...}</code></p>
  
  <p>Everything works as expected and i can get information as <code>albumNames , albumCovers , albumIds</code> etc .</p>
  
  <p>Now for every album that i import , i want to have an array where i will save all of its pictures and thumbnails. For this reason i make another API call , <code>FB.api(albumId + "/photos", function(response) {}</code> .</p>
  
  <p>I process the response like this :</p>
  
  <pre><code>for(var k=0; k&lt;numberOfPhotos; k++){
                albumThumbnails[i][k] = response.data[k].picture;
                albumPhotos[i][k] = response.data[k].source;
                                     }
  </code></pre>
  
  <p>At this point though i get the error : <code>Uncaught TypeError: Cannot set property '0' of undefined</code> </p>
  
  <p>I cant understand what is undefined though... Any idea on this  ?</p>
  
  <p>*By the way the next API call that i make <code>FB.api( albumCover, function(response) {..}</code> to get the cover photos of the albums and create a jquery mobile listView , works too.</p>
  
  <h2>EDIT</h2>
  
  <hr>
  
  <p>The answer provided below solved the 2-dimensional table problem.</p>
  
  <p>However now the error is : <code>Uncaught TypeError: Cannot read property 'picture' of undefined</code></p>
  
  <h2>EDIT2</h2>
  
  <hr>
  
  <p>I am experiencing the same issue later in the code so i am making this EDIT. The code now looks as suggested like this :</p>
  
  <pre><code>&lt;script&gt;
          var albumPhotos = new Array();
          var albumThumbnails = new Array();
          window.fbAsyncInit = function() {
              // init the FB JS SDK 
              FB.init({
                  appId      : '564984346887426',                    // App ID from the app dashboard
                  channelUrl : 'channel.html',                       // Channel file for x-domain comms
                  status     : true,                                 // Check Facebook Login status
                  xfbml      : true                                  // Look for social plugins on the page
              });
  
              // Additional initialization code such as adding Event Listeners goes here
              FB.api('169070991963/albums', function(response) {
                  if(!response || response.error) {
                      // render error
                      alert("Noo!!");
                  } else {
                      // render photos
                      for(var i=0; i&lt;response.data.length; i++){  
                          (function (i) {
                              var albumName = response.data[i].name;
                              var albumCover = response.data[i].cover_photo;
                              var albumId = response.data[i].id;
                              var numberOfPhotos = response.data[i].count;
  
                              FB.api(albumId + "/photos", function(response) {
                                  if(!response || response.error) {
                                      // render error
                                      alert("Noo!!");
                                  } else {
                                      for(var k=0; k&lt;response.data.length; k++){ 
                                           albumThumbnails[i] =  albumThumbnails[i]||{};
                                           albumThumbnails[i][k] = response.data[k].picture;
                                           albumPhotos[i] = albumPhotos[i] || {};
                                           albumPhotos[i][k] = response.data[k].source;
                                      }
                                  }
                              }); 
  
                              console.log(albumName);
                              FB.api( albumCover, function(response) {
                                  if(!response || response.error) {
                                      // render error
                                      alert("Noo!!");
                                  } else {
                                      // render photos
                                      $(".albums").append('&lt;li&gt;'+
                                          '&lt;a href="#Gallery' + i + '"' + 'data-transition="slidedown"&gt;'+
                                          '&lt;img src= "' + response.picture + '"  /&gt;'+
                                           '&lt;h2&gt;' + albumName + '&lt;/h2&gt;'+
                                           '&lt;p&gt;' + "Number of Photos:  " + numberOfPhotos +'&lt;/p&gt;'+
                                           '&lt;/a&gt;'+
                                           '&lt;/li&gt;')
                                      .listview('refresh');
  
                                      $("#home").after('&lt;div data-role="page" data-add-back-btn="true" id=Gallery'+ i +
                                          ' class="gallery-page"&gt; ' +
                                          ' &lt;div data-role="header"&gt;&lt;h1&gt;Gallery&lt;/h1&gt;&lt;/div&gt; ' + ' &lt;div data-role="content"&gt; ' +
                                          ' &lt;ul class="gallery"&gt;&lt;/ul&gt; ' + ' &lt;/div&gt; ' +
                                          ' &lt;/div&gt; ');
  
                                      for(var x=0; x &lt; albumPhotos[i].length; x++)
                                          $('#Gallery' + i + ' .gallery').append('&lt;li&gt;&lt;a href="' + albumPhotos[i][x] + '" rel="external"&gt;&lt;img src="' +  albumThumbnails[i][x] + '" /&gt;&lt;/a&gt;&lt;/li&gt;');
  
                                  }
                              }); 
                          })(i);                                      
                      } //end of for loop
                  console.log(albumPhotos);
                  console.log(albumThumbnails);
                  }
              });
  
          };
  </code></pre>
  
  <p>I added this piece of code as you see :</p>
  
  <pre><code>for(var x=0; x &lt; albumPhotos[i].length; x++)
              $('#Gallery' + i + ' .gallery').append('&lt;li&gt;&lt;a href="' + albumPhotos[i][x] + '" rel="external"&gt;&lt;img src="' +  albumThumbnails[i][x] + '" /&gt;&lt;/a&gt;&lt;/li&gt;');
  </code></pre>
  
  <p>Every row in the 2dimensional table <code>albumPhotos</code> is an album and every column is a photo inside this album. With the <code>for</code> loop above i tried to create a list of Galleries that every Gallery has an album with all its photos.</p>
  
  <p>Again i get the error : </p>
  
  <pre><code>Uncaught TypeError: Cannot read property '0' of undefined 
  Uncaught TypeError: Cannot read property '1' of undefined 
  Uncaught TypeError: Cannot read property '2' of undefined 
  Uncaught TypeError: Cannot read property '3' of undefined 
  .
  .
  .
  </code></pre>
  
  <p>Why do i get this now?</p>