Ошибка JavaScript при попытке чтения пустого узла

Question

Я пытаюсь отобразить каталог из документа XML, и все работает, хотя при попытке показать изображение по умолчанию, если изображение отсутствует в узле XML, оно отключает поэтому родительский узел заставляя его не показывать какой-либо из него, и он читает мне ошибку в моей консоли, говоря:

Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined

, которая указывает на эту часть кода:

if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {

Так что мой вопрос где в моем коде ниже моя ошибка, в результате чего он не загружает узел XML?

PS: Если кому-то нужно больше моего кода, пожалуйста, дайте мне знать, и я был бы рад опубликовать его.

for (var i = fromItem; i < nextMaxItem; i++) { 
      if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) { 

       xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">' 
        + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">' 
        + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">' 
        + '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />' 
        + '<div class="caption">' 
        + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>' 
        + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>' 
        + '</div>' 
        + "</a></div></div></article>"; 

      } else { 

       xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">' 
        + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">' 
        + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">' 
        + '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />' 
        + '<div class="caption">' 
        + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>' 
        + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>' 
        + '</div>' 
        + "</a></div></div></article>"; 

      } 

     } 

Вот весь код JavaScript:

var page = 1, perPage = 12, content = document.getElementById('content'), 
pagination = document.getElementById('pagination'), records; 

function paganation(page) { 
    var nextMaxItem = perPage * page, 
     fromItem = (page - 1) * perPage, 
     maxPages = Math.ceil(records.length/perPage); 

    var xmlContent = '<div class="row">'; 
    for (var i = fromItem; i < nextMaxItem; i++) { 
     if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) { 

      xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">' 
       + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">' 
       + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">' 
       + '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />' 
       + '<div class="caption">' 
       + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>' 
       + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>' 
       + '</div>' 
       + "</a></div></div></article>"; 

     } else { 

      xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">' 
       + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">' 
       + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">' 
       + '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />' 
       + '<div class="caption">' 
       + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>' 
       + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>' 
       + '</div>' 
       + "</a></div></div></article>"; 

     } 

    } 
    xmlContent += "</div>"; 
    content.innerHTML = xmlContent; 

    var paginationContent = '<nav><ul class="pagination">'; 
    if (page > 1) { 

     paginationContent += '<li>'; 
     paginationContent += '<a href="javascript:paganation(' + (page - 1) + ');" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>'; 
     paginationContent += '</li>'; 

    } else { 

     paginationContent += '<li class="disabled">'; 
     paginationContent += '<a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>'; 
     paginationContent += '</li>' 

    } 



    var prevPosition = page - 3; 
    var nextPosition = page + 3; 

    for (var i = 1; i <= maxPages; i++) { 
     if (i != page) { 
      if (i >= prevPosition && i <= nextPosition) { 

       var linkToPage = i == prevPosition ? 1 : i == nextPosition ? maxPages : i; 
       var linkText = i == prevPosition ? "..." : i == nextPosition ? "..." : i; 

       paginationContent += "<li>"; 
       paginationContent += '<a href="javascript:paganation(' + linkToPage + ');">' + linkText + '</a>'; 
       paginationContent += "</li>"; 

      } 
     } else { 

      paginationContent += "<li class='active'>"; 
      paginationContent += '<a href="javascript:paganation(' + i + ');">' + i + '</a>'; 
      paginationContent += "</li>"; 

     } 
    } 

    var next = page + 1; 
    if (next <= maxPages) { 

     paginationContent += '<li>'; 
     paginationContent += '<a href="javascript:paganation(' + next + ');" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>'; 
     paginationContent += '</li>'; 

    } else { 

     paginationContent += '<li class="disabled">'; 
     paginationContent += '<a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>'; 
     paginationContent += '</li>'; 

    } 

    paginationContent += '</ul></nav>'; 
    pagination.innerHTML = paginationContent; 
} 

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 

    xmlhttp = new XMLHttpRequest(); 

} 
else {// code for IE6, IE5 

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 

} 

xmlhttp.open("GET", xmlUrl, false); 
xmlhttp.send(); 
xmlDoc = xmlhttp.responseXML; 
records = xmlDoc.getElementsByTagName(xmlNode); 

records = Array.prototype.slice.call(records).sort(function() { 
    return Math.random() > 0.5 ? 1 : -1 
}); 

paganation(1); 

Answer 1

Если мы представим себе, что records была длиной 18, а затем на второй странице, вы бы:

fromItem - 12 
nextMaxItem - 24 

Вы итерации i от fromItem до nextMaxItem, но как только вы проходите мимо i = 18, вы прошли мимо конца records. Вы должны убедиться, что этого не произойдет. Вы должны убедиться, что вы не перебирать мимо конца вашего массива:

var max = Math.min(nextMaxItem, records.length); 
for (var i = fromItem; i < max; i++) { 
    .... 
}