Filtering XML nodelist with Ajax and JavaScript

Question

I'm trying to build a page with AJAX and JavaScript that displays the contents of an XML file filtering it by node value. The XML is similar to this:

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
  </cd>
  <cd>
    <title>Hide your heart</title>
    <artist>Bonnie Tyler</artist>
    <country>UK</country>
  </cd>
  <cd>
    <title>Greatest Hits</title>
    <artist>Dolly Parton</artist>
    <country>USA</country>
  </cd>
  <cd>
    <title>Still got the blues</title>
    <artist>Gary Moore</artist>
    <country>UK</country>
  </cd>
</catalog>

After the XMLHttpRequest, the CD data are converted to an array (nodeList) before being displayed in a table:

function handleXML (xmlData) {
    var data = xmlData;
    var cd = data.getElementsByTagName("cd");
    var arrayCD = Array.prototype.slice.call(cd);

     var table = "<table>";
     table += "<tbody>";

     for ( var i = 0, len = arrayCD.length; i < len; i++ ) {
            table += "<tr>";
            table += "<td>"+ arrayCD[i].getElementsByTagName("title")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ arrayCD[i].getElementsByTagName("artist")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ arrayCD[i].getElementsByTagName("country")[0].firstChild.nodeValue +"</td>";
            table += "</tr>";
        }

        table += "</tbody>";
        table += "</table>";

    return table;
}

My question is how to filter the table data so that (for instance) only CDs produced in the UK are displayed. I've been struggling with this for a while and now begin to feel more and more confused. I suppose a solution could be something like:

 arrayCD.filter(function(c) {
        var filterC = c.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue;
        return (filterC = "UK");
    });

(which should be inserted between var arrayCD and var table). But I simply can't make it work. I'd be glad if somebody could suggest an answer.

if you want to do it imperatively assign some data-attr to each node (td in your table) and set style=display:none in your loop. $('[data-country="blah"]').each(el => $(el).style('display', 'none')) or something like that, cant remember jquery api anymore — Daniel Lizik
– Daniel Lizik, Commented Mar 28, 2017 at 23:06
Thanks, it looks good and it's not the first time that I think that a jQuery answer sounds convincing. Unfortunately, due to company restrictions, the solution I'm looking for has to be XML and Javascript, with no jQuery or JSON. — Cunctator03
– Cunctator03, Commented Mar 28, 2017 at 23:50
json is (usually) native to javascript. jquery is just a fancy wrapper for document.querySelector anyway...the strategy is basically the same — Daniel Lizik
– Daniel Lizik, Commented Mar 29, 2017 at 2:15

user31571297 · Accepted Answer · 2025-11-08 10:36:50Z

The idea of your approach was correct, though you need to remember that .filter() does not modify the array itself, rather it returns a new array. It is this return value over which you need to iterate.

Tangentially, DOM Level 3 (2004) standardized Element.textContent, which seems to be what you're missing.

function handleXML(xmlData) {
    var cd = xmlData.getElementsByTagName("cd");
    var table = "<table>";
    table += "<tbody>";

    Array.prototype.filter.call(cd, function(c) {
        var filterC = c.getElementsByTagName("country")[0].textContent;
        return filterC == "UK";
    }).forEach(function(e) {
        table += "<tr>";
        table += "<td>"+ e.getElementsByTagName("title")[0].textContent +"</td>";
        table += "<td>"+ e.getElementsByTagName("artist")[0].textContent +"</td>";
        table += "<td>"+ e.getElementsByTagName("country")[0].textContent +"</td>";
        table += "</tr>";
    });
    table += "</tbody>";
    table += "</table>";

    return table;
}

Collectives™ on Stack Overflow

Filtering XML nodelist with Ajax and JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related