Sort Array of object by object field in Angular 6
Solution 1
You can simply use 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);
Solution 2
Try this
products.sort(function (a, b) {
return a.title.rendered - b.title.rendered;
});
OR
You can import lodash/underscore library, it has many build functions available for manipulating, filtering, sorting the array and all.
Using underscore: (below one is just an example)
import * as _ from 'underscore';
let sortedArray = _.sortBy(array, 'title');
Solution 3
Not tested but should work
products.sort((a,b)=>a.title.rendered > b.title.rendered)
Steve
Updated on July 06, 2020Comments
-
Steve almost 4 years
I am getting an array of "product"s from a resolver getting data from a json endpoint.
ngOnInit() { this.products = this._route.snapshot.data.products; console.log('products: ', this.products); }
where one of the objects in this array is in the format
{ "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": "" }, ... },
What I want to do is sort this array by the field
title.rendered
In olden times, in AngularJS, I would simply use an
orderBy
pipe in the template set to this field. Apparently, this is removed in Angular and from doing research it seems the preferred method is to sort the data itself, such as inngOnInit
.But I can't figure out how to sort
products
byproducs.title.rendered
. -
Steve almost 6 yearsYup. Thanks, I was really confused about the compare a,b when reading about it on MDN.
-
Steve almost 6 yearsWhat's the
localeCompare
about, and why is it different to Luis' answer? I've never seen it. -
amrender singh almost 6 years@Steve From Mdn -The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order. It is preferable to use localeCompare when you are sorting string values.
-
ASDFGerte almost 6 yearsWhile this will often work, it is not a consistent compare function - it is not symmetric.
-
Steve almost 6 years@ASDFGerte can you elaborate? What's the better way?
-
ASDFGerte almost 6 years@Steve Did you look at the (currently five times upvoted) duplicate suggestion's top answer? Note that, as many suggested already,
localeCompare
exists already, no need to reinvent the wheel. -
adiga over 4 years