Alex Arriaga

The problem:

1) Imagine you have following array in JSON

2) Now, you want to order your input array by title (ascendant), but unfortunately you notice you have many titles repeated, well in most of the articles on the internet about how to write a custom function for ordering they point to create some code like:

3) You believe everything is going to work, so you run your sort() by using the custom method like:

But…. suddenly you realize that doesn’t work! Because you obtain different output in Google Chrome, Firefox and Internet Explorer! Then, you spend a lot of time trying to figure out the actual reason about that behavior, but… nothing, you can’t find anything clear 🙁

Let’s see next images with the error:

1) First one is the output in Firefox.

2) Second one corresponds to the output given by Google Chrome

As you can see, there are differences when the titles are the same (check the orange box, the indexes don’t match in both browsers).

Here is the thing: when two or more strings are found in the same array and you apply a sort function, there is no guarantee that is going to work… why? Because every single browser implements the ECMAScript standards in a different way.

Chrome’s javascript sort function behaves more like the ECMA standards than the sort function implemented in other browsers (like Firefox, IE, etc), which try to maintain some backwards compatibility with legacy javascript code.

From: Inderpreet Singh.

 

Now, this is an interesting note from Mozilla Developers Network.

If compareFunction is supplied, the array elements are sorted according to the return value of the compare function. If a and b are two elements being compared, then:

If compareFunction(a, b) is less than 0, sort a to a lower index than b, i.e. a comes first.
If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behaviour, and thus not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.
If compareFunction(a, b) is greater than 0, sort b to a lower index than a.
compareFunction(a, b) must always return the same value when given a specific pair of elements a and b as its two arguments. If inconsistent results are returned then the sort order is undefined

The solution

The solution I propose is to add an unique key per item in order to compare that key in our custom method in case of any string is equals to other. Let’s do that, we need to modify our original array to have something like:

 Rules to add the unique key

• The obvious one is this key MUST unique.
• We can use the position of the item in the original array or any other thing.
• I would recommend to use a number (integer works perfectly). This number can be generated with a more complex function (e.g. using an encoding in another numeric base, like 264).

 The new function for stable sorting

With this new implementation the outputs are the same for both browsers (even I tested on Internet Explorer 8+).

Wait a minute… how about ordering by date?

Well, it is basically the same, we only need to add a parsing step (I would recommend to use moment.js) to not compare dates as string but as JavaScript Date objects.

 Rules to parse/use dates

• Use an ISO 8601 format, e.g: “2014-01-25T01:32:21.170Z”, in this way you will be sure moment.js will be able to parse the string into a Date object.
• Compare dates in milliseconds (in moment.js milliseconds can be obtained with valueOf() function).
• Always check is the date was parsed correctly (in moment.js use isValid() function)

I hope you find this information useful for your own implementation, you can find this code in my Github account.

And remember be happy with your code!