【问题标题】:Sorting an Array of JSON objects by date - Angular2按日期对 JSON 对象数组进行排序 - Angular2
【发布时间】:2017-10-24 00:58:19
【问题描述】:

我正在尝试对 Angular2 中的对象数组进行排序。最好的解释方式是给出代码示例:

var activity =  {
            SEQ_NO: -1,
            SIGNUP_NAME: "Testing Activity",
            SHORT_DESCRIPTION: "This activity min: 2, max: 25",
            EVENT_BEGIN_DATE: "2018/09/25",
            EVENT_END_DATE: "2018/09/25"
           };

数组中充满了如上所示的对象。我的目标是获取数组并根据日期对其进行排序。我还调用了一个转换日期函数,它接受数字日期并将其转换为可读格式:

convertDate(incomingDate) {
    var myDate = new Date(incomingDate);
	  var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
	  console.log(days[myDate.getDay()]);
	  var date = days[myDate.getDay()]+" "+(myDate.getMonth()+1)+'/'+myDate.getDate()+'/'+myDate.getFullYear();
    //alert(date);
	  return date;
  }

因此,本例中显示的活动对象将转换为: Tuesday 9/25/2018

如何按日期对这些对象的数组进行排序?当我显示它们时,我希望按月顺序显示它们。

先谢谢大家了。

【问题讨论】:

  • 转换前能不能先排序(排序后转换)?如果你要这样做,它已经是可排序的格式,你只需要在键上使用 .sort()。
  • 它可以在任何时候排序。我只是提供了转换部分,以防万一它可能更容易!
  • 您想按开始日期还是按结束日期进行转换?升序还是降序?

标签: javascript arrays json angular sorting


【解决方案1】:

当字符串日期格式为 yyyy/mm/dd 时,无需转换即可正确排序。

list.sort(function (a, b) {
  a = a.EVENT_BEGIN_DATE;
  b = b.EVENT_BEGIN_DATE;
  if (a < b) {
    return -1;
  } else if (a > b) {
    return 1;
  }
  return 0;
});

然后您可以转换日期。

【讨论】:

  • 虽然假设格式为 yyyy/mm/dd 在技术上是正确的,但字符串比较是个坏主意。例如,如果另一个阅读本文的人没有使用前导零:'2018/10/17' &gt; '2018/2/17' // false。最好使用 Date 或日期库。
  • @stealththeninja 是的,现在我考虑到它在某些时候字符串将是一个日期,所以在一步它可以用于排序,在下一步它可以转换为人类如果需要,可读的字符串。
【解决方案2】:

首先我会convert your date to a unix time,因为它们已经按月排序。

其次,我只想sort your array by that number

因为您使用的是打字稿。

component.html

 <div *ngFor="let sorted of sortedArray$ | async">
    {{sorted.start}} 
 </div>

组件.ts

  list: any[] = [{
    start: '2018/09/25',
    content: 'second'
  },{
    start: '2018/08/10',
    content: 'first'
  }];

  sortedArray$: Observable<any[]>;

  constructor(public navCtrl: NavController) {
    this.sortedArray$ = Observable.of(this.list)
    .map((data) => {
        data.sort((a, b) => {
            return new Date(a.start.getTime()) > new Date(b.start.getTime());
        });
        return data;
    });
  }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-05-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-05
    • 2011-10-30
    • 2015-02-25
    相关资源
    最近更新 更多