Sorting XML results by date using jQuery

I am having a lot of trouble sorting my returned XML data by date. The dates are stored as YYYY-MM-DD. I'm struggling to find any help online for this specific date format.

Here is my js:

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "database.xml",
        dataType: "xml",
        success: function (xml) {
            $(xml).find("event").filter(function () {
                return $(this).find("eventplace").text() == 'NEWCASTLE';
            }).each(function () {
                var title = $(this).find('eventname').text();
                var venue = $(this).find('eventvenue').text();
                var city = $(this).find('eventplace').text();
                var date = $(this).find('eventdate').text();
                $('<div class="items">' + title + '</div>').html(title + venue + city + date).appendTo('#comingup');
            });
        }
    });
});

and here is a sample of my XML:

<Root_Element>
<eventserie>
    <event>
        <eventname>LITTLE COMETS</eventname>
        <eventvenue>O2 ACADEMY</eventvenue>
        <eventplace>NEWCASTLE</eventplace>
        <eventdate>2014-02-21</eventvdate>
    </event>
    <event>
        <eventname>SYMPHONIC PICTURES</eventname>
        <eventvenue>THE CLUNY</eventvenue>
        <eventplace>NEWCASTLE</eventplace>
        <eventdate>2014-03-10</eventvdate>
    </event>
    <event>
        <eventname>LET'S BUY HAPPINESS</eventname>
        <eventvenue>THINK TANK</eventvenue>
        <eventplace>NEWCASTLE</eventplace>
        <eventdate>2014-02-10</eventvdate>
    </event>
</eventserie></Root_Element>

Answers


Store the timestamp in a data attribute, and the elements in an array, then sort the array based on the timestamps before appending the elements :

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "database.xml",
        dataType: "xml",
        success: function (xml) {

            var items = [];

            $(xml).find("event").filter(function () {
                return $(this).find("eventplace").text() == 'NEWCASTLE';
            }).each(function () {
                var title = $(this).find('eventname').text();
                var venue = $(this).find('eventvenue').text();
                var city = $(this).find('eventplace').text();
                var date = $(this).find('eventdate').text();

                items.push(
                    $('<div />', {
                        'class'  : 'items',
                        text     : title + venue + city + date,
                        'data-d' : new Date(date).getTime()
                    })
                );
            });

            items.sort(function(a, b) {
               return $(a).data('d').localeCompare( $(b).data('d') );
            });

            $.each(items, function(idx, itm) { 
                $('#comingup').append(itm); 
            });
        }
    });
});

Pushing to an array isn't necessary. Turn your collection into an object array and sort through it. The variable xmlevents demonstrates how that is done. Also declare your variables var outside of the loop. That need only be done once.

$(document).ready(function () {
  $.ajax({
    type: "GET",
    url: "database.xml",
    dataType: "xml",
    success: function (xml) {
    var xmlevents = $(xml).find("event");
    xmlevents.sort(function(a,b){
     a = $(a).find("eventdate").text();
     b = $(b).find("eventdate").text();
     return (a.localeCompare(b));
    }
    var title, venue, city, date 
    xmlevents.each(function () {
      title = $(this).find('eventname').text();
      venue = $(this).find('eventvenue').text();
      city = $(this).find('eventplace').text();
      date = $(this).find('eventdate').text();
            $('<div class="items">' + title + '</div>').html(title + venue + city + date).appendTo('#comingup');
        });
});

Need Your Help

select records according to the difference between records R

r select conditional-statements records difference

I hope someone could suggest me something for this "problem", because I really don't know how to proceed...

Simple tool to monitor a Tomcat server using JMX

eclipse tomcat jmx

I am a computer science student currently doing an internship. My boss has asked me to write a simple tool to monitor a Tomcat server. I am just starting this project so I'm basically just playing ...