title: cannot read property '0' of undefined JSON
body: <p>I'm trying to make an image slider that changes the image 'displayMain' every few seconds. My problem is that when I call the displayMain function in setInterval, I continuously get a 'cannot read property 0 of undefined' error. Even when I use the hardcoded value of jsonData[i].name, I receive the same error. The value gets passed in displayThumbs just fine, however. Does anyone know why I can't retain the values in displayMain but can do so in displayThumbs?</p>
  
  <pre><code>window.addEventListener('load', function () {
      var mainDiv = document.getElementById('main');
      var descDiv = document.getElementById('main-description');
      var gallery = document.querySelector('#main-img');
      var ul = document.querySelector('ul');
      var li;
      var i = 0;
      var displayThumbs;
      var thumbName;
      var current = 0;
      var images = [];
  
      function displayMain () {
          var data = images[i];
          gallery.src = 'img/' + data[0];
          descDiv.innerHTML = '&lt;h2&gt;' + data[1] + '&lt;/h2&gt;';
      }
  
      function displayThumbs () {
          for (i = 0; i &lt; images.length; i += 1) {
              var data = jsonData[i].name.replace('.jpg', '_thumb.jpg');
              // thumbnails use dom to make img tag
              li = document.createElement('li');
              thumbs[i] = document.createElement('img');
              var createThumbNail = thumbs[i].src = 'img/' + data;
              thumbs[i].setAttribute('alt', data);
              thumbs[i].addEventListener('click', function() {
                  alert(createThumbNail);
              });
              ul.appendChild(thumbs[i]);
          }
      }
  
      // success handler should be called
      var getImages = function () {
          // create the XHR object
          xhr = new XMLHttpRequest();
          // prepare the request
          xhr.addEventListener('readystatechange', function () {
              if (xhr.readyState === 4 &amp;&amp; xhr.status == 200) {
                  // good request ...
                  jsonData = JSON.parse(xhr.responseText);
                  for (var i = 0; i &lt; jsonData.length; i += 1) {
                      var data = [];
                      data.push(jsonData[i].name);
                      data.push(jsonData[i].description);
                      images.push(data);
                  }
  
                  displayMain();
                  displayThumbs();
                  setInterval(displayMain, 1000);
              }
              else {
                  // error
              }    
          });
  
          xhr.open('GET', 'data/imagedata.json', true);
          xhr.send(null);    
      };
  
      // setInterval(getImages, 2000);
      getImages();
      // displayThumbs();
  });
  </code></pre>