JavaScript error with XML when trying to read empty node

Question

I am trying to render a catalog from an XML document and everything works, although when trying to show a default image if there is no image present in the XML node, it disables the parent node therefore forcing it not to show any of it and it reads me an error in my console saying:

Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined

Which is pointing to this part of the code:

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

So my question is where in my code below is my error causing it to not load the XML node?

PS: If anybody needs more of my code please let me know, and I would be happy to post it.

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>";

            }

        }

Here is the whole JavaScript code:

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);

You seem to be iterating over values that aren't related to records, so most likely there's a mismatch. — adeneo
– adeneo, Commented Mar 16, 2015 at 20:03
records[i] does not exist, which might be because i is past the array length. Do a console.log(records.length) before the loop, and put a console.log(i) inside of it. Does i always stay between 0 (included) and records.length (not included)? — blex
– blex, Commented Mar 16, 2015 at 20:07
I have added my whole code, would both of you mind taking a second look? — ZZZZtop
– ZZZZtop, Commented Mar 16, 2015 at 20:25
Are you still working with that XML structure? Because if I don't try it myself, this comment section is going to be flooded with questions. — blex
– blex, Commented Mar 16, 2015 at 20:51

JLRishe · Accepted Answer · 2015-03-16 22:23:33Z

1

If we imagine that records was of length 18, then for the second page, you would have:

fromItem - 12
nextMaxItem - 24

You are iterating i from fromItem to nextMaxItem, but as soon as you go past i = 18, you've gone past the end of records. You need to make sure that doesn't happen. You need to ensure that you don't iterate past the end of your array:

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

answered Mar 16, 2015 at 22:23

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript error with XML when trying to read empty node

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related