在Angular 6中按对象字段排序对象数组

Question

我正在从一个从JSON端点获取数据的解析器中获得一个"product"数组。

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

这个数组中的一个对象是以下格式之一：

Translated text:

One of the objects in this array is in one of the following formats:

 {
    "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": ""
    },
    ...
},

我想做的是根据字段对这个数组进行排序。

在AngularJS的旧时代，我只需在模板中使用一个设置为此字段的管道即可。显然，在Angular中已经删除了这个功能，从我的研究来看，首选方法是对数据本身进行排序，例如在中。

但是我无法弄清楚如何按对进行排序。

- Steve

---

你可以查看这个链接：https://dev59.com/UXNA5IYBdhLWcg3wAI3d#50600956 - Harun Or Rashid

Answer 1

您可以简单地使用Arrays.sort()

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

Working Example :

var array = [{"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":""},},{"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":"adfPWIN"},"content":{"rendered":"","protected":false},"featured_media":0,"parent":0,"template":"","better_featured_image":null,"acf":{"domain":"SMB","ds_rating":"3","dt_rating":""}},{"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":"bbfPWIN"},"content":{"rendered":"","protected":false},"featured_media":0,"parent":0,"template":"","better_featured_image":null,"acf":{"domain":"SMB","ds_rating":"3","dt_rating":""}}];
array.sort((a,b) => a.title.rendered.localeCompare(b.title.rendered));
 
 console.log(array);

- amrender singh

---

localeCompare是什么，为什么它与Luis的答案不同？我从未见过它。 - Steve

localeCompare() 方法返回一个数字，指示参考字符串在排序顺序中是位于给定字符串之前、之后还是相同。当您对字符串值进行排序时，最好使用 localeCompare 方法。 - amrender singh

Answer 2

试试这个

products.sort(function (a, b) {
  return a.title.rendered - b.title.rendered;
});

或者

你可以导入 lodash/underscore 库，它有许多可用于操作、筛选、排序数组的构建函数。

使用 underscore：（下面是一个示例）

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

- Surjeet Bhadauriya

Answer 3

未经测试但应该可以工作

 products.sort((a,b)=>a.title.rendered > b.title.rendered)

- Luis felipe De jesus Munoz

---

好的。谢谢，我在阅读MDN时对于比较a、b感到非常困惑。 - Steve

虽然这通常可以工作，但它不是一个一致的比较函数 - 它不是对称的。 - ASDFGerte

@ASDFGerte，你能详细说明一下吗？什么是更好的方法？ - Steve

@Steve 你看过（目前已经有五个赞的）重复建议的最佳答案了吗？请注意，正如许多人已经建议的那样，localeCompare 已经存在，没有必要重新发明轮子。 - ASDFGerte

这样做不行：JavaScript中的排序：返回布尔值是否足以作为比较函数？ - adiga