0

I have following data:

const data = 
[{date: "2022-05-10 13:36:00", open: 155.535, low: 155.4, high: 155.67, close: 155.44},
{date: "2022-05-10 13:35:00", open: 155.23, low: 155.2102, high: 155.62, close: 155.53},
{date: "2022-05-10 13:34:00", open: 154.97, low: 154.96, high: 155.29, close: 155.22}];

I am using following code to sort the data by date (oldest to newest):

const data = 
[{date: "2022-05-10 13:36:00", open: 155.535, low: 155.4, high: 155.67, close: 155.44},
{date: "2022-05-10 13:35:00", open: 155.23, low: 155.2102, high: 155.62, close: 155.53},
{date: "2022-05-10 13:34:00", open: 154.97, low: 154.96, high: 155.29, close: 155.22}];
console.log(Object.entries(data).sort((([, a], [, b]) => {
    return new Date(a.date) - new Date(b.date)
  })).map(i=>{ return i[1]}))

In chrome, it renders pretty well, but on safari, it will not work and will maintain the original order.

My question is what makes this difference and how to make the sort algorithem work in all broswer?

Thanks!

P.S. I do check this question, Chrome and Safari javascript .sort() method works differently, but the answers indicated that The sort is not necessarily stable, but according to mdn now:

Since version 10 (or EcmaScript 2019), the specification dictates that Array.prototype.sort is stable.

What I am missing?

James
  • 2,732
  • 2
  • 5
  • 28

2 Answers2

3

You already have the dates formatted in a manner suitable for sorting. So we can write a trivial sorter for them:

const sortByDate = (data) => 
  data .sort (({date: a}, {date: b}) => a < b ? -1 : a > b ? 1 : 0)

const data = [{date: "2022-05-10 13:36:00", open: 155.535, low: 155.4, high: 155.67, close: 155.44}, {date: "2022-05-10 13:35:00", open: 155.23, low: 155.2102, high: 155.62, close: 155.53}, {date: "2022-05-10 13:34:00", open: 154.97, low: 154.96, high: 155.29, close: 155.22}]

console .log (sortByDate (data))
.as-console-wrapper {max-height: 100% !important; top: 0}

You can't use subtraction for sorting on strings, but you can do lexicographic sorting. This is very similar to the ISO-8601 format, only with the central T replaced by a space. It will sort the same way.

Scott Sauyet
  • 49,207
  • 4
  • 49
  • 103
  • Thank you so much and too my surprised, this worked! Do you mind explain to me a little bit how this is implement? – James May 16 '22 at 17:19
  • What is the idea behind using space in the `console .log` and `data .sort`? Is there any performance different between using space or not? Also, does the `date: a}, {date: b}` convert `a` and `b` to new date object (never known that before)? I never seen that snytax before so appreciated if you could explain it a little bit! Thank! – James May 16 '22 at 17:25
  • When destructuring an object, you can add an alias for a property name. `a` and `b` are simply aliases to the `date` properties of the two input objects. As to the space it's simply an idiosyncratic style choice of my own. – Scott Sauyet May 16 '22 at 17:32
1

In Safari the "YYYY-MM-DD hh:mm:ss" date format is not supported and calling new Date() on such a value will always return Invalid Date. The sort is failing essentially because all values are the same after Date conversion.

To solve this issue, you could

  • use the "YYYY/MM/DD hh:mm:ss" date format
    ex. new Date('YYYY-MM-DD hh:mm:ss'.replace(/-/g, "/"))

  • use moment for the string to date conversion (this may be an overkill if you do not need moment anywhere else in your code)

  • compare the ISO date strings, as their lexicographical order is the same as chronological order (as mentioned by @gre_gor in the comments)

  • replace the space in "YYYY-MM-DD hh:mm:ss" with a T, to get "YYYY-MM-DDThh:mm:ss" which is another accepted format (as mentioned in the linked thread)

There may be other solutions as well, but you get the idea.

For reference:
Invalid date in safari
https://techtalkbook.com/javascripts-new-date-does-not-work-on-ie-and-safari/

ValleyCrisps
  • 356
  • 2
  • 9
  • 1
    One of the answers in the linked question also solves it by replacing the space with a "T". – gre_gor May 11 '22 at 04:41
  • You are right. As you mentioned in the comments, comparing the ISO strings should do the trick too. Let me edit the answer. – ValleyCrisps May 11 '22 at 04:45