Search for element in XML file using jQuery

Question

I have an XML file structured like this:

<movies>
    <movie>
        <title>A title</title>
        <year>2016</year>
    <boxoffice>18 million</boxoffice>
    </movie>
    <movie>
        <title>Second title</title>
        <year>2010</year>
        <boxoffice>10 million</boxoffice>
    </movie>
<movies>

I want to find all movies after year 2015 and show it in a table using jquery. I get the xml using:

function getx() {
            var x = $.ajax({
                url:      movies.xml,
                datatype: "xml",
                async:    false
            });
            return x.responseXML;
        }

and go though it using:

function find(year){
            var x = getx();
            $(x).find("year").each(function() {
                if (Number($(this).text()) > Number(year) {
                    $(document.getElementById("results")).append("<tr><td>" + $(this).text() + "</td></tr>");
                }
            });
        }

This returns creates a table row containing 2016. How could I modify this to search for one element and once found return all elements from the collection it belongs to? (I want to get a table row with title, year and boxoffice)

Answer 1

First: using an ajax call as sync is an issue, I suggest you to use a callback.

Second: in order to convert an xml to a jQuery object you can use jQuery.parseXML( data ). After the conversion you can use .filter() and .each() for selecting the elements you need and append them to the table.

In jquery the ID Selector (“#id”) is:

$('#results')

instead of:

$(document.getElementById("results"))

In order to get the siblings elements you can use: Node.nextSibling and Node.previousSibling or you can use the jQuery.prev() and jQuery.next().

The snippet:

var xml = '<movies>\
        <movie>\
        <title>A title</title>\
<year>2016</year>\
<boxoffice>18 million</boxoffice>\
</movie>\
<movie>\
<title>Second title</title>\
<year>2010</year>\
<boxoffice>10 million</boxoffice>\
</movie>\
</movies>';

var xmlDoc = $.parseXML( xml );
var jqXml = $(xmlDoc).find('year').filter((idx, ele) => {return +ele.textContent > 2015;});
jqXml.each(function(idx, ele) {
    $('#results').append("<tr><td>" + ele.previousSibling.textContent +
                    "</td><td>" + ele.textContent + "</td><td>" + 
                    ele.nextSibling.textContent + "</td></tr>");
})

td {
    border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="results">
    
</table>