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

Question

我从从 json 端点获取数据的解析器中获取了一系列“产品”。

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

该数组中的一个对象的格式为

 {
    "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 管道。显然，这在 Angular 中已被删除，并且从进行研究看来，首选方法是对数据本身进行排序，例如在 ngOnInit 中。

但我不知道如何排序 products 通过 producs.title.rendered 。

原文由 Steve 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

工作示例：

 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

未经测试，但应该可以工作

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

原文由 Luis felipe De jesus Munoz 发布，翻译遵循 CC BY-SA 4.0 许可协议