Sort JSON in chronological order according to date, newest first, using jquery

Question

I need to order a bunch of articles in an external json file according to the date they were made, any ideas?

I am already displaying the data via AJAX and limiting to 6 results but I am really struggling to sort it via the date. The date is in a string within the JSON file

JSON:

 [
  {
    "id": "5537a23050b2c722f390ab60",
    "thumbImage": "http://lorempixel.com/175/115",
    "title": "reprehenderit nisi occaecat magna eiusmod officia qui do est culpa",
    "author": "Melton Myers",
    "description": "sint aliqua in anim nulla Lorem aute voluptate veniam anim aliquip laborum sit voluptate amet proident est incididunt aute amet sit est elit ad cillum occaecat velit esse id quis velit deserunt esse occaecat dolore elit deserunt quis cillum cupidatat enim consectetur consectetur proident",
    "url": "http://fakeurl.com",
    "date": "26-01-2015",
    "tags": [
      "eu",
      "velit",
      "mollit"
    ]
  }
]

jquery:

// getting JSON data from js/article_data.json
$.ajax({
    url: 'js/article_data.json',
    dataType: 'json',
    type: 'get',
    cashe: true,
    success: function(data) {
        //Making so that only 6 results are show
        $(data).slice(0, 6).each(function(index, value) {
          //setting varibles to data in article_data.json
            var clear = "<div class='clear'></div>";
            var img = "<a href='" + value.url + "'>" + "<img src= " + value.thumbImage + "/></a>";
            var title = "<a class='title' href='" + value.url + "'>" + value.title + "</a>";
            var description = "<p>" + value.description + "</p>";
            var date = "<small class='date'>" + value.date + "</small>";
            var tags = "<small class='tags'> Tags:<br>" + value.tags + "</small><hr>";
            var closeLink = "</a>";
            // putting the JSON data into the HTML (inside the div with an id of news)
            $(clear).appendTo('#news');
            $(img).appendTo('#news');
            $(title).appendTo('#news');
            $(date).appendTo('#news');
            $(description).appendTo('#news');
            $(tags).appendTo('#news');
            $(closeLink).appendTo('#news');

        });
        //Checking to see if there is data in the JSON file and throwing up an error sign if there is.
        if (data.length === 0) {
            var error = "<div class='error'><h1>Opps! No results!</h1></div>";
            $(error).appendTo('#news');
        }
    }

});

Answer 1

The date format you have in your json Array is DD-MM-YYYY format you need to format it in YYYY-MM-DD format (ISO). Then you can convert this date to javascript Date object and then you can use it for comparison like this :

new Date(a.date.split("-").reverse());

Full code :

$(document).ready(function() {
  $.ajax({
    url: "/echo/json/", // path for json
    data: data,
    type: "POST",
    success: function(response) {
      data = response.slice(0, 6).sort(function(a, b) {
        A = new Date(a.date.split("-").reverse());
        B = new Date(b.date.split("-").reverse());
        return A < B;
      });
      $.each(data, function(index, value) {
        itemHtml = "<div class='clear'></div><a href='" + value.url + "'><img src= '" + value.thumbImage + "'/></a><a class='title' href='" + value.url + "'>" + value.title + "</a> <p>" + value.description + "</p><small class='date'>" + value.date + "</small> <small class='tags'> Tags:<br>" + value.tags.join() + "</small><hr> </a>";

        $("#news").append(itemHtml);
      });

    }
  });
});

Here is working demo https://jsfiddle.net/cqx4dhL5/3/

Let me know if you need any explanation

Answer 2

You can try something like this:

array.sort(function(a,b){
  if(a.date<b.date){
    return -1
  }
  if(a.date>b.date){
    return 1
  }
  return 0      
})

Answer 3

You can use sort before doing each. Like this.

 var a = [ { "id": "asdf", "date": "26-01-2015", "tags": [ "eu", "velit", "mollit" ] }, { "id": "qqqq", "date": "20-01-2015", "tags": [ "eu", "velit", "mollit" ] }, { "id": "ttttt", "date": "26-01-2016", "tags": [ "eu", "velit", "mollit" ] } ]; var b = a.sort(function(a, b){return a.date < b.date;}); console.log(b); 

Order can be changed in compare function in sort method.

Hope this helps.