关于javascript：在Angular 6中按对象字段排序数组


Sort Array of object by object field in Angular 6

本问题已经有最佳答案，请猛点这里访问。

我从解析器获取"产品"数组，从JSON端点获取数据。

1
2
3
4
ngOnInit() {
  this.products = this._route.snapshot.data.products;
  console.log('products: ', this.products);
}

如果此数组中的一个对象的格式为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 {
   "id": 3645,
   "date":"2018-07-05T13:13:37",
   "date_gmt":"2018-07-05T13:13:37",
   "guid": {
       "rendered":""
    },
   "modified":"2018-07-05T13:13:37",
   "modified_gmt":"2018-07-05T13:13:37",
   "slug":"vpwin",
   "status":"publish",
   "type":"matrix",
   "link":"",
   "title": {
       "rendered":"VPWIN"
    },
   "content": {
       "rendered":"",
       "protected": false
    },
   "featured_media": 0,
   "parent": 0,
   "template":"",
   "better_featured_image": null,
   "acf": {
       "domain":"SMB",
       "ds_rating":"3",
       "dt_rating":""
    },
    ...
},

我要做的是按字段title.rendered对这个数组进行排序。

在古时候，在AngularJS中，我只需要在设置为该字段的模板中使用一个orderBy管道。显然，这是从角度上消除的，并且从研究中，似乎首选的方法是对数据本身进行排序，例如在ngOnInit中。

但我不知道如何用producs.title.rendered对products进行排序。

相关讨论

您只需使用EDOCX1[0]

1
array.sort((a,b) => a.title.rendered.localeCompare(b.title.rendered));

工作示例：

1
2
3
4
5
6
7
8
9
var array = [{"id":3645,"date":"2018-07-05T13:13:37","date_gmt":"2018-07-05T13:13:37","guid":{"rendered":"
<div class="suo-content">[collapse title=""]<ul><li><wyn>localeCompare</wyn>是关于什么的，为什么它与路易斯的答案不同？我从没见过。</li><li>@steve from mdn-localecompare()方法返回一个数字，指示引用字符串是在排序顺序中位于给定字符串之前还是之后，还是与给定字符串相同。排序字符串值时，最好使用localeCompare。</li></ul>[/collapse]</div><hr>
<p>
Try this
</p>

[cc lang="javascript"]products.sort(function (a, b) {
  return a.title.rendered - b.title.rendered;
});

或

您可以导入lodash/underline库，它有许多可用于操作、过滤、排序数组和所有操作的构建函数。

使用下划线：(下面一个只是一个例子)

1
2
import * as _ from 'underscore';
let sortedArray = _.sortBy(array, 'title');

未测试，但应有效

1
 products.sort((a,b)=>a.title.rendered > b.title.rendered)
相关讨论