How do I sort this Array of objects using Vanilla or lodash

Question

I have this object returned to me through an angular HttpClient Observable.

{
"jsonrpc": "2.0",
"result": [
{
  "event": {
    "id": "29688772",
    "name": "Demoliner/Middelkoop v Behar/Escobar",
    "countryCode": "AR",
    "timezone": "UTC",
    "openDate": "2020-02-08T20:00:00.000Z"
  },
  "marketCount": 1
},
{
  "event": {
    "id": "29691591",
    "name": "Bemelmans v Pellegrino",
    "countryCode": "FR",
    "timezone": "UTC",
    "openDate": "2020-02-09T09:00:00.000Z"
  },
  "marketCount": 1
},
{
  "event": {
    "id": "29690566",
    "name": "Diez v Emil Ruusuvuori",
    "countryCode": "NL",
    "timezone": "UTC",
    "openDate": "2020-02-08T13:14:00.000Z"
  },
  "marketCount": 1
},
{
  "event": {
    "id": "29690822",
    "name": "Koepfer v J Rodionov",
    "countryCode": "US",
    "timezone": "UTC",
    "openDate": "2020-02-08T18:00:00.000Z"
  },
  "marketCount": 1
},
{
  "event": {
    "id": "29691586",
    "name": "Basic v Vanni",
    "countryCode": "FR",
    "timezone": "UTC",
    "openDate": "2020-02-09T09:00:00.000Z"
  },
  "marketCount": 1
},
{
  "event": {
    "id": "29691596",
    "name": "P Kotov v Mayot",
    "countryCode": "FR",
    "timezone": "UTC",
    "openDate": "2020-02-09T09:00:00.000Z"
  },
  "marketCount": 1
}

I want to sort the array by openDate.

I was thinking to do it in the subscription like so

getTennisMatches() {
this.betfairService.getTennisMatches().subscribe((data: any[]) => {
  this.matches = data;
  this.sortedMatches = this.matches.sort((a, b) => (a.result.event.openDate > b.result.event.openDate) ? 1 : -1);
  // OR
  this.sortedMatches = _.sortBy(this.matches.result, o => o.result.event.openDate);
});

}

Both sort methods are not working with errors this.matches.sort is not a function for vanilla or Cannot read property 'event' of undefined for lodash

I think I have to iterate over the events but I'm not sure what I'm doing. I'm using lodash because I find it's syntax easier to understand but I don't have to use it. Thanks

The array is `this.matches.result`, not `this.matches`. And your sort comparator function should return a number, not a boolean. — Pointy, Feb 08 '20 at 13:30
Thanks for your quick response. I thought it was returning a number either a 1 or a minus 1. Sorry I'm a bit confused. — Bwizard, Feb 08 '20 at 13:34
1. it doesn't return `1` or `-1` but `1` or `0`. 2. Even then, you have to return *three* values, not two. It's important to know if two items are *equal*. [Sorting in JavaScript: Shouldn't returning a boolean be enough for a comparison function?](https://stackoverflow.com/q/24080785/) — VLAZ, Feb 08 '20 at 13:38

LukStorms · Accepted Answer · 2020-02-08T14:31:33.840

Instead of sorting the matches object, you could sort the result array inside the object.

this.matches.result.sort((a, b) => Date.parse(a.event.openDate) - Date.parse(b.event.openDate));

But do note that this will also sort the original object.

Simplified example snippet:

let matches = {
result : [
  { id:1001 , event: { openDate : "2020-02-03T20:00:00.000Z" } },
  { id:1002 , event: { openDate : "2020-02-01T20:00:00.000Z" } },
  { id:1003 , event: { openDate : "2020-02-03T20:00:00.000Z" } },
  { id:1004 , event: { openDate : "2020-02-04T20:00:00.000Z" } },
  { id:1005 , event: { openDate : "2020-02-02T20:00:00.000Z" } }
]
};

let sorted = matches.result.sort((a, b) =>  Date.parse(a.event.openDate) - Date.parse(b.event.openDate));

console.log('original object after sort', JSON.stringify(matches));

score 0 · Answer 2 · answered Feb 08 '20 at 13:51

this.matches.sort is not a function indicates that your variable this.matches is empty and you are trying to iterates over it so first you have to check your response from the MS call. Can be retrieving an empty array.

type instead of 'any' will be helpfully for your propose to check in case that it works and retrieve some data but they do not have the expected format.

Can also check 'Network' section in Chrome dev tool to watch the response.

How do I sort this Array of objects using Vanilla or lodash

2 Answers2