使用jquery，根据日期按时间顺序排序JSON，最新的在前

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

本文关键字：JSON 排序 最新 顺序 时间 jquery 日期 使用      更新时间：2023-09-26

我需要根据日期在外部json文件中订购一堆文章，有什么想法吗?

我已经通过AJAX显示数据，限制到6个结果，但我真的很难通过日期排序。日期在JSON文件

中的字符串中。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');
        }
    }
});

json数组中的日期格式是DD-MM-YYYY格式，您需要将其格式化为YYYY-MM-DD格式(ISO)。然后你可以将这个日期转换为javascript date对象然后你可以像这样使用它进行比较:

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

完整代码:

$(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);
      });
    }
  });
});

这里是工作演示https://jsfiddle.net/cqx4dhL5/3/

如果你需要任何解释请告诉我

您可以尝试这样做:

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

您可以在每个操作之前使用sort。这样的。

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);

排序方法中的比较函数可以改变顺序。

相关文章：