Chrome and Safari javascript .sort() method works differently

Question

I faced with really strange thing (at least it is strange to me). I am trying to sort items in array but receiving really different result in Chrome and Safari.

Please take a look at my JSFIDDLE in CHROME and then in Safari

Chrome has the right order, which should be:

Funny Pig 1 

Funny Pig 2 

Funny Pig 3 

Angry Lion 1

Angry Lion 2

Little  Rabbit 1

Little Rabbit 2

Any thoughts?

does safari (I don't safari at all) like it better if you `item.result.sort((a, b) => { return animals_order.indexOf(a.name.split(' ')[0]) > animals_order.indexOf(b.name.split(' ')[0]) ? 1 : (animals_order.indexOf(a.name.split(' ')[0]) < animals_order.indexOf(b.name.split(' ')[0]) ? -1 : 0); });` — Jaromanda X, Apr 18 '18 at 12:36
@JaromandaX yes, it works now. In Chrome and Safari. Thank you! — Maximus Dredoff, Apr 18 '18 at 12:52

Nina Scholz · Accepted Answer · 2018-04-18T13:30:36.310

3

Array#sort:

The sort is not necessarily stable.

And while you sort only by the name part, up to the first space, the sorting algorithm choose a place for same name, which do not respect the numerical value.

To overcome this problem, you could sort by the numerical value as well.

Any sorting before the last sorting is altered.

You need for strings which have more than one space a different method, because you get with two spaces three elements. Now it uses not numerical values at start and the numerical value at the end of the string.

var animals_order = 'Funny Pig, Angry Lion, Little Rabbit',
    data = [{ result: [{ name: "Angry Lion 2" }, { name: "Funny Pig 1" }, { name: "Funny Pig 2" }, { name: "Angry Lion 1" }, { name: "Funny Pig 3" }, { name: "Little Rabbit 2" }, { name: "Little Rabbit 1" }] }];

function order () {
    data.forEach(item => {
        item.result.sort((a, b) => {
            var [aName, aValue] = a.name.split(/\s(?=\d)/),
                [bName, bValue] = b.name.split(/\s(?=\d)/);

            return animals_order.indexOf(aName) - animals_order.indexOf(bName) || aValue - bValue;
        });
    });
}

function display() {
    data[0].result.forEach(assignment => {
        document.getElementById('divID').innerHTML += "<br />" + assignment.name;
    });
}

order();
display();

<div id="divID"></div>

edited Apr 18 '18 at 13:30

answered Apr 18 '18 at 12:36

Nina Scholz

376,160
25
347
392

Thank you for your answer. I have never faced with such issue before. And interesting that Safari doesn't handle it in a right way without additional manipulation. P.S. Unfortunately your code is still doesn't work well in Safari, because a/bValue equals to the second word not the numerical value. – Maximus Dredoff Apr 18 '18 at 13:09
The first items are good all the other have reverse order https://monosnap.com/file/iioDXAjGdzuTv93dEsLyKFI20JXO2R – Maximus Dredoff Apr 18 '18 at 13:19
Here is a link to the screenshot of your answer https://monosnap.com/file/XWgVadKUvD4VV3Cdj6gLpW3iAlnVOZ – Maximus Dredoff Apr 18 '18 at 13:20
you can also see the same behavior even in chrome. – Maximus Dredoff Apr 18 '18 at 13:23
Thanks. It works now. In safari and all the other browsers – Maximus Dredoff Apr 18 '18 at 13:27

Chrome and Safari javascript .sort() method works differently

1 Answers1

Linked