javascript - 在Angular 6中按对象字段排序对象数组
问题描述
我从从 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
解决方案
你可以简单地使用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);
推荐阅读
- reactjs - 如何减少生产中的 reactjs 文件大小?
- ios - 金属着色器在缓冲区中插入值
- android - 更改对象/类
- string - Shell.Application getDetailsOf jpg Exif DateTaken 无效 DateTime
- ios - 避免在应用程序处于前台时显示通知警报
- javascript - 访问多维数组中的每个值
- ios - 如何在ios中将应用程序上传到应用程序商店时解决此问题
- javascript - Angular 5 viewchild 只能工作一次
- css - div 中的文本与具有表格单元格显示属性的图像对齐
- c# - 游戏在统一上运行良好,但在 android 上运行不正常