Bacon2305
Bacon2305

Reputation: 311

How to sort xml data by Date in JQuery

This application is extracting information from an RSS feed and I need to sort the articles by date. The xml data contains a 'Date' element which lists the date in ddmmyy format. My question: is there a sort function I can implement in jQuery to sort the information and display it in the correct date order? (Date order should be the first entry to display is the furthest date out,example: 01/20/14 then 01/07/2014 then 12/22/13 etc... Here is what I have so far:

<script type="text/javascript">
 $(document).ready(function() {

        $('input[type=radio]').click(function() {
            var id = this.id;
            if(id == 'radio-bio') { var categoryURL = '/BayAreaTech/wp-rss2.php?cat=15';}
            else if (id == 'radio-com'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=13';}
            else if (id == 'radio-eleP'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=9';}
            else if (id == 'radio-eleD'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=10';}
            else if (id == 'radio-nano'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=16';}
            else if (id == 'radio-opt'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=12';}
            else if (id == 'radio-semi'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=11';}
            else { var categoryURL = '/BayAreaTech/wp-rss2.php?cat=1';}

            $('#feedContainer').empty();
                        $.ajax({
                        type: 'GET',
                        url: categoryURL,
                        dataType: 'xml',
                        success: function (xml) {
                            $(xml).find("item").each(function () {
                                  var title = $(this).find("title").text();
                                  var date = $(this).find("Date").text();
                                  var region = date.substr(6);
                                        if (region.length < 3) { region = "ALL"; }  
                                  var description = $(this).find("description").text();
                                  var descriptdisplay = description.substr(0, description.indexOf(",")+6); //Parsed DATE from description
                                        if (descriptdisplay.length > 35) { descriptdisplay = "See event for details"; }
                                    //var locationdisplay = description.substr(description.indexOf(",")+6,4); //Parsed the location from description
                                  var category = $(this).find("category").text();
                                  var linkUrl = $(this).find("link").text();
                                  var displaytitle = "<a href='" + linkUrl + "' target='_blank'>" + title + "</a>"  
                                  $('#feedContainer').append('<h3>'+displaytitle+'</h3><p>'+"Event Date: "+descriptdisplay+'</p><p>'+"Location: "+region+'</p');

                            });
                        }
                    });

        });
 });
 </script>

Upvotes: 1

Views: 2695

Answers (1)

charlietfl
charlietfl

Reputation: 171679

Would suggest you first parse the xml into an array of objects that can be sorted, prior to parsing into html

success: function (xml) {
    var data=[];
    $(xml).find("item").each(function () {
      var dateText= $(this).find("Date").text()

      var item={
           title: $(this).find("title").text(),
           dateText =dateText,
           date : new Date( dateText),
           /* other properties*/
        }  
        /* push object to array*/
        data.push( item);

    });

    /* sort data*/
    data.sort(function(a,b){
         return a.date > b.date;
    });

     /* now parse to html */    
      $.each(data, function(index, item){


      })

Upvotes: 2

Related Questions