根据日期按时间顺序对JSON进行排序,使用jquery

问题描述:

根据日期排序JSON文件中的一堆文章,根据它们的制作日期,任何想法?根据日期按时间顺序对JSON进行排序,使用jquery

我已经通过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'); 
     } 
    } 

}); 

你可以尝试这样的事情:

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

您可以按使用在做每个之前。喜欢这个。

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

顺序可以以比较功能的排序方法来改变。

希望这会有所帮助。

您在json数组中使用的日期格式是DD-MM-YYYY格式,您需要使用YYYY-MM-DD格式(ISO)格式化它。然后,你可以在此日期转换为JavaScript日期对象,那么你可以使用它进行这样的比较:

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/

让我知道如果您需要任何解释