ReactJS using .sort() method mixing up results in array

Question

I have an array of data that queries the results through a prop. I am able to obtain the data but, unable to sort it. I want all the data with MyTeam to appear first.

However, when I load this into the browser I obtain different results.

In Safari the data lists MyTeam to be the second element in the array

In Chrome, the data lists MyTeam to be the third element but, whenever I interact with them (via an onClick method) the data swaps around in a different order.

If I don't have the .sort() method, everything remains the same and nothing changes.

Is there a proper way to sort the array?

    var gameList = this.props.data.sort(function(game) {
        return (game.homeTeam == 'MyTeam' || game.awayTeam == 'MyTeam') ? 0 : 1;
    }).map(function(game, i) {
       //console.log(game.homeTeam + ' ' + game.awayTeam);
       });

David L. Walsh · Accepted Answer · 2016-02-18 02:36:11Z

1

Array#sort compares TWO items of the array. Your compare function must have two arguments. I suggest the following:

var gameList = this.props.data.sort(function(a, b) {
    var matchA = a.homeTeam === 'MyTeam' || a.awayTeam === 'MyTeam';
    var matchB = b.homeTeam === 'MyTeam' || b.awayTeam === 'MyTeam';

    // This will return
    // -1 if matchA is true and matchB is false
    //  0 if matchA and matchB are both true or both false
    //  1 if matchA is false and matchB is true
    return (matchB ? 1 : 0) - (matchA ? 1 : 0);
});

edited Feb 18, 2016 at 2:36

answered Feb 18, 2016 at 2:29

David L. Walsh

24.9k10 gold badges63 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Simon Over a year ago

Thank you for clarifying this seems to place MyTeam first now and is stable in Safari. The results still seem a bit wonky though in Chrome and keep jumping around (with MyTeam staying as the first result)

David L. Walsh Over a year ago

Well sort isn't guaranteed to be stable. The order of a and b is arbitrary if the compare function returns 0.

Simon Over a year ago

Thanks @David Is there no stable method at the moment to sort through the arrays?

David L. Walsh Over a year ago

If you want a particular order, you'll need to choose something else to sort on. Suppose each has a unique numeric id. You could change it to: return (matchB ? 1 : 0) - (matchA ? 1 : 0) || b.id - a.id;

Collectives™ on Stack Overflow

ReactJS using .sort() method mixing up results in array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related