无法读取未定义JSON的属性“ 0”

Question

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?

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 = '<h2>' + data[1] + '</h2>';
    }

    function displayThumbs () {
        for (i = 0; i < 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 && xhr.status == 200) {
                // good request ...
                jsonData = JSON.parse(xhr.responseText);
                for (var i = 0; i < 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();
});

Answer 1

Your problem is that your displayMain uses whatever value i is at the time, and i never gets incremented, so it'll be equal to images.length after the for loop in displayThumbs . displayThumbs increments it itself, so you won't ever go beyond the end of the array.

In your comment, you mentioned that you want to cycle through the images. This should work a bit better:

function displayMain () {
    var data;

    // wrap around to the first image
    if (i >= images.length) {
        i = 0;
    }

    data = images[i];
    gallery.src = 'img/' + data[0];
    descDiv.innerHTML = '<h2>' + data[1] + '</h2>';
    i++;
}

Personally, I would use a private i , just in case another function reuses the same variable:

function displayMain () {
    var data;

    // wrap around to the first image
    if (displayMain.i >= images.length || isNaN(displayMain.i)) {
        displayMain.i = 0;
    }

    data = images[displayMain.i];
    gallery.src = 'img/' + data[0];
    descDiv.innerHTML = '<h2>' + data[1] + '</h2>';

    // move to the next image
    displayMain.i++;
}

This attaches a variable named i to the function displayMain . It will update this variable each time it is called, and no other function will use the same i variable.