정의되지 않은 JSON의 속성 '0'을 읽을 수 없습니다.

Question

몇 초마다 이미지 'displayMain'을 변경하는 이미지 슬라이더를 만들려고합니다. 내 문제는 setInterval에서 displayMain 함수를 호출 할 때 계속 '정의되지 않은 속성 0을 읽을 수 없습니다'오류가 발생한다는 것입니다. jsonData [i] .name의 하드 코드 된 값을 사용하는 경우에도 동일한 오류가 발생합니다. 그러나 displayThumbs에서 전달 된 값은 정상적으로 처리됩니다. 아무도 왜 displayMain 값을 유지할 수 있지만 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

귀하의 문제는 i이 시간에, 그리고 그것을 displayThumbs에서 for 루프 후 images.length 같아야합니다 그래서 i이 증가 결코 극복 어떤 값 귀하의 displayMain 사용합니다. displayThumbs은 자체적으로 증가하므로 어레이의 끝 부분을 초과하지는 않습니다.

댓글에서 이미지를 순환 할 것을 언급하셨습니다. 이것은 조금 더 나은 작동합니다 :

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++; 
} 

을 개인적으로, 나는 또 다른 기능은 동일한 변수 재사용 단지의 경우, 개인 i을 사용 :이 기능 displayMain에 i라는 변수를 첨부

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++; 
} 

을 . 이 변수는 호출 될 때마다이 변수를 업데이트 할 것이고 다른 함수는 동일한 i 변수를 사용할 수 없습니다.