Filter xml file using Javascript

Question

I am trying to rebuild an old application without the loss of data. The current data has all been stored in xml files that i am trying to read using Javascript.

This is the Javascript (i'm new to this, feedback is appreciated):

// Create a connection to the file.
            var Connect = new XMLHttpRequest();

            // Define which file to open and
            // send the request.
            Connect.open("GET", "writers.xml", false);
            Connect.setRequestHeader("Content-Type", "text/xml");
            Connect.send(null);

            // Place the response in an XML document.
            var TheDocument = Connect.responseXML;

            // Place the root node in an element.
            var Customers = TheDocument.childNodes[0];

            // Retrieve each customer in turn.
            for (var i = 0; i < Customers.children.length; i++){
                var Customer = Customers.children[i];
                //Create div's for data
                document.getElementById("body").innerHTML += "<div id='who" + i + "'></div>"
                document.getElementById("body").innerHTML += "<div id='age" + i + "'></div>"
                document.getElementById("body").innerHTML += "<div id='hobby" + i + "'></div>"
                document.getElementById("body").innerHTML += "<div id='image" + i + "'></div>"
                document.getElementById("body").innerHTML += "<div id='something" + i + "'></div>"
                //Assign data to correct divs
                var who = Customer.getElementsByTagName("name");
                var who2 = who[0].textContent.toString();
                document.getElementById("who"+i).innerHTML += who2;

                var age = Customer.getElementsByTagName("age");
                var age2 = age[0].textContent.toString();
                document.getElementById("age"+i).innerHTML += age2;

                var hobby = Customer.getElementsByTagName("hobby");
                var hobby2 = hobby[0].textContent.toString();
                document.getElementById("hobby"+i).innerHTML += hobby2;

                var image = Customer.getElementsByTagName("image");
                var image2 = image[0].textContent.toString();
                document.getElementById("image"+i).innerHTML += image2;

                var something = Customer.getElementsByTagName("something");
                var something2 = something[0].textContent.toString();
                document.getElementById("something"+i).innerHTML += something2;
            }

This is an example of my xml file:

<doc>
<person>
    <name>Paul</name>
    <age>21</age>
    <hobby>blabla</hobby>
    <image>thisisanimage.jpg</image>
    <something>Random string</something>
</person>
<person>
    <name>Peter</name>
    <age></age>
    <hobby>blabla</hobby>
    <image>thisisanimage.jpg</image>
    <something>Random string</something>
</person>
</doc>

Now i am trying to filter Peter out, because the age field is empty. Anyone got an idea?

Answer 1

The easiest way is to add a condition in the loop, to test if the age is blank. If the age value is blank then the if block will not be entered, and the next iteration of the loop will start.

for (var i = 0; i < Customers.children.length; i++) {
    var Customer = Customers.children[i];

    var age = Customer.getElementsByTagName("age");
    var age2 = age[0].textContent.toString();

    if (age2 != '') { // only do the below code if age2 is not blank

        //Create div's for data
        document.getElementById("body").innerHTML += "<div id='who" + i + "'></div>"
        document.getElementById("body").innerHTML += "<div id='age" + i + "'></div>"
        document.getElementById("body").innerHTML += "<div id='hobby" + i + "'></div>"
        document.getElementById("body").innerHTML += "<div id='image" + i + "'></div>"
        document.getElementById("body").innerHTML += "<div id='something" + i + "'></div>"

        document.getElementById("age" + i).innerHTML += age2;

        //Assign data to correct divs
        var who = Customer.getElementsByTagName("name");
        var who2 = who[0].textContent.toString();
        document.getElementById("who" + i).innerHTML += who2;

        var hobby = Customer.getElementsByTagName("hobby");
        var hobby2 = hobby[0].textContent.toString();
        document.getElementById("hobby" + i).innerHTML += hobby2;

        var image = Customer.getElementsByTagName("image");
        var image2 = image[0].textContent.toString();
        document.getElementById("image" + i).innerHTML += image2;

        var something = Customer.getElementsByTagName("something");
        var something2 = something[0].textContent.toString();
        document.getElementById("something" + i).innerHTML += something2;
    }
}