Sort Array of object by object field in Angular 6 [duplicate]

Question

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 in ngOnInit.

But I can't figure out how to sort products by producs.title.rendered.

You can see this : stackoverflow.com/questions/1129216/…
– Harun Or Rashid
Commented Jul 5, 2018 at 15:35 — Harun Or Rashid, Commented Jul 5, 2018 at 15:35

amrender singh · Accepted Answer · 2018-07-05 15:28:52Z

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);

What's the localeCompare about, and why is it different to Luis' answer? I've never seen it. — Steve, Commented Jul 5, 2018 at 15:22
@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. — amrender singh, Commented Jul 5, 2018 at 15:24

Surjeet Bhadauriya · Accepted Answer · 2018-07-05 15:24:33Z

25

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');

answered Jul 5, 2018 at 15:24

Surjeet Bhadauriya

7,1763 gold badges39 silver badges54 bronze badges

Add a comment |

Luis felipe De jesus Munoz · Accepted Answer · 2018-07-05 15:18:51Z

4

Not tested but should work

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

answered Jul 5, 2018 at 15:18

Luis felipe De jesus Munoz

7,9533 gold badges38 silver badges54 bronze badges

Yup. Thanks, I was really confused about the compare a,b when reading about it on MDN.
– Steve
Commented Jul 5, 2018 at 15:21
While this will often work, it is not a consistent compare function - it is not symmetric.
– ASDFGerte
Commented Jul 5, 2018 at 15:31
@ASDFGerte can you elaborate? What's the better way?
– Steve
Commented Jul 5, 2018 at 15:46
@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.
– ASDFGerte
Commented Jul 5, 2018 at 15:53
1

This will not work: Sorting in JavaScript: Shouldn't returning a boolean be enough for a comparison function?
– adiga
Commented Nov 5, 2019 at 10:08

Add a comment |

Collectives™ on Stack Overflow

Sort Array of object by object field in Angular 6 [duplicate]

3 Answers 3

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Linked

Related