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?
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.
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/