sort Javascript array by two numeric fields

Question

grouperArray.sort(function (a, b) {
    var aSize = a.gsize;
    var bSize = b.gsize;
    var aLow = a.glow;
    var bLow = b.glow;
    console.log(aLow + " | " + bLow);      
    return (aSize < bSize) ? -1 : (aSize > bSize) ? 1 : 0;
});

This code sorts the array by gsize, smallest to largest.

How would I change it to sort first by gsize and then by glow?

sort function reacts on positive, negative or zero result. so you can just write: "return aSize - bSize". it will be more simple and readable code. — , May 01 '14 at 14:50
Top [answer](https://stackoverflow.com/a/24292023/8112776), compressed: **Sort array of objects by `col0` then `col1` (ascending):** `myArray.sort(function(a,b){return a.col0-b.col0||a.col1-b.col1});` Alternate example: **Sort array of arrays by index #0, then #2, then #1 (descending):** `myArray.sort(function(a,b){return b[0]-a[0]||b[2]-a[2]||b[1]-a[1]});` — ashleedawg, Dec 16 '21 at 16:57
Covered by the more general "[How to sort an array of objects by multiple fields?](//stackoverflow.com/q/6913512/90527)" — outis, Feb 03 '22 at 09:05

score 237 · Answer 1 · answered Jun 18 '14 at 17:50

237

grouperArray.sort(function (a, b) {   
    return a.gsize - b.gsize || a.glow - b.glow;
});

shorter version

answered Jun 18 '14 at 17:50

anmorozov23

2,395
1
11
3

great short cut! helped me put a more complex solution together.. https://stackoverflow.com/questions/6101475/how-does-one-sort-a-multi-dimensional-array-by-multiple-columns-in-javascript/56982102#56982102 – Joseph Poirier Jul 11 '19 at 19:02
3

Nice and clean! The only thing it only works for numbers. – Afanasii Kurakin Jul 24 '19 at 07:40
Can you explain the logic in here ?!. It worked for me to `sort an array with a key's value first` and then `sort the result with another key's value ` – KTM May 07 '20 at 15:19
3

@KTM The logic goes as follow: if both gsize are equal, then the first part of the condition is equal to 0, which is considered as false, and the second part of the condition is executed. – Scalpweb May 21 '20 at 18:46
@Scalpweb Yeah :) so this works to sort an array with any number of keys one by one right?! Nice trick – KTM May 21 '20 at 19:05
if you want to understand why that works you might wanna look at https://medium.com/@safareli/pss-ordering-is-a-monoid-61a4029387e – Safareli Sep 09 '20 at 17:28

score 132 · Accepted Answer · answered May 25 '11 at 19:47

132

grouperArray.sort(function (a, b) {
    var aSize = a.gsize;
    var bSize = b.gsize;
    var aLow = a.glow;
    var bLow = b.glow;
    console.log(aLow + " | " + bLow);

    if(aSize == bSize)
    {
        return (aLow < bLow) ? -1 : (aLow > bLow) ? 1 : 0;
    }
    else
    {
        return (aSize < bSize) ? -1 : 1;
    }
});

answered May 25 '11 at 19:47

Chris Eberle

47,994
12
82
119

3

To make this more concise using arrow syntax, without resorting to non-obvious techniques shown in some other answers: `grouperArray.sort((a, b) => a.gsize == b.gsize ? a.glow - b.glow : a.gsize - b.gsize`. To make the code easier to understand, we keep explicit the test for `==`. – ToolmakerSteve Nov 27 '20 at 23:46

score 57 · Answer 3 · answered Sep 28 '17 at 12:57

57

grouperArray.sort((a, b) => a.gsize - b.gsize || a.glow - b.glow);

Even shorter version using arrow syntax!

answered Sep 28 '17 at 12:57

Vinorth

968
8
13

4

Even shorter, take out the spaces: `grouperArray.sort((a,b)=>a.gsize-b.gsize||a.glow-b.glow);` – Captain Fantastic Sep 08 '20 at 16:02
1

if you want to understand why that works you might wanna look at https://medium.com/@safareli/pss-ordering-is-a-monoid-61a4029387e – Safareli Sep 09 '20 at 17:27

nihlton · Answer 4 · 2014-03-27T18:29:54.990

I realize this was asked some time ago, but I thought I would add my solution.

This function generates sort methods dynamically. simply supply each sortable child property name, prepended with +/- to indicate ascending or descending order. Super re-usable, and it doesn't need to know anything about the data structure you've put together. Could be made idiot proof - but doesn't seem necessary.

function getSortMethod(){
    var _args = Array.prototype.slice.call(arguments);
    return function(a, b){
        for(var x in _args){
            var ax = a[_args[x].substring(1)];
            var bx = b[_args[x].substring(1)];
            var cx;

            ax = typeof ax == "string" ? ax.toLowerCase() : ax / 1;
            bx = typeof bx == "string" ? bx.toLowerCase() : bx / 1;

            if(_args[x].substring(0,1) == "-"){cx = ax; ax = bx; bx = cx;}
            if(ax != bx){return ax < bx ? -1 : 1;}
        }
    }
}

example usage:

items.sort(getSortMethod('-price', '+priority', '+name'));

this would sort items with lowest price first, with ties going to the item with the highest priority. further ties are broken by the item name

where items is an array like:

var items = [
    { name: "z - test item", price: "99.99", priority: 0, reviews: 309, rating: 2 },
    { name: "z - test item", price: "1.99", priority: 0, reviews: 11, rating: 0.5 },
    { name: "y - test item", price: "99.99", priority: 1, reviews: 99, rating: 1 },
    { name: "y - test item", price: "0", priority: 1, reviews: 394, rating: 3.5 },
    { name: "x - test item", price: "0", priority: 2, reviews: 249, rating: 0.5 } ...
];

live demo: http://gregtaff.com/misc/multi_field_sort/

EDIT: Fixed issue with Chrome.

for typescript (for not getting an `error TS2554: Expected 0 arguments, but got ..`) use the syntax here: https://stackoverflow.com/a/4116634/5287221 — Chananel P, Sep 02 '20 at 14:24

John Green · Answer 5 · 2011-05-25T23:27:18.213

I expect the ternary operator ((aSize < bSize) ? -1 : (aSize > bSize) ? 1 : 0;) has you confused. You should check out the link to understand it better.

Until then, here's your code blown out into full if/else.

grouperArray.sort(function (a, b) {
    if (a.gsize < b.gsize)
    {
        return -1;
    }
    else if (a.gsize > b.gsize)
    {
        return 1;
    }
    else
    {
        if (a.glow < b.glow)
        {
            return -1;
        }
        else if (a.glow > b.glow)
        {
            return 1;
        }
        return 0;
    }
});

score 6 · Answer 6 · answered Oct 09 '15 at 19:34

Here's an implementation for those who may want something more generic that would work with any number of fields.

Array.prototype.sortBy = function (propertyName, sortDirection) {

    var sortArguments = arguments;
    this.sort(function (objA, objB) {

        var result = 0;
        for (var argIndex = 0; argIndex < sortArguments.length && result === 0; argIndex += 2) {

            var propertyName = sortArguments[argIndex];
            result = (objA[propertyName] < objB[propertyName]) ? -1 : (objA[propertyName] > objB[propertyName]) ? 1 : 0;

            //Reverse if sort order is false (DESC)
            result *= !sortArguments[argIndex + 1] ? 1 : -1;
        }
        return result;
    });

}

Basically, you may specify any number of property name / sort direction:

var arr = [{
  LastName: "Doe",
  FirstName: "John",
  Age: 28
}, {
  LastName: "Doe",
  FirstName: "Jane",
  Age: 28
}, {
  LastName: "Foo",
  FirstName: "John",
  Age: 30
}];

arr.sortBy("LastName", true, "FirstName", true, "Age", false);
//Will return Jane Doe / John Doe / John Foo

arr.sortBy("Age", false, "LastName", true, "FirstName", false);
//Will return John Foo / John Doe / Jane Doe

score 3 · Answer 7 · answered Jul 05 '18 at 16:11

Here is an implementation that uses recursion to sort by any number of sort fields from 1 to infinite. You pass it a results array which is an array of result objects to sort, and a sorts array which is an array of sort objects defining the sort. Each sort object must have a "select" key for the key name that it sorts by and an "order" key which is a string indicating "ascending" or "descending".

sortMultiCompare = (a, b, sorts) => {
    let select = sorts[0].select
    let order = sorts[0].order
    if (a[select] < b[select]) {
        return order == 'ascending' ? -1 : 1
    } 
    if (a[select] > b[select]) {
        return order == 'ascending' ? 1 : -1
    }
    if(sorts.length > 1) {
        let remainingSorts = sorts.slice(1)
        return this.sortMultiCompare(a, b, remainingSorts)
    }
    return 0
}

sortResults = (results, sorts) => {
    return results.sort((a, b) => {
        return this.sortMultiCompare(a, b, sorts)
    })
}

// example inputs
const results = [
    {
        "LastName": "Doe",
        "FirstName": "John",
        "MiddleName": "Bill"
    },
    {
        "LastName": "Doe",
        "FirstName": "Jane",
        "MiddleName": "Bill"
    },
    {
        "LastName": "Johnson",
        "FirstName": "Kevin",
        "MiddleName": "Bill"
    }
]

const sorts = [
    {
        "select": "LastName",
        "order": "ascending"
    },
    {
        "select": "FirstName",
        "order": "ascending"
    },
    {
        "select": "MiddleName",
        "order": "ascending"
    }    
]

// call the function like this:
let sortedResults = sortResults(results, sorts)

score 3 · Answer 8 · answered May 25 '11 at 19:47

grouperArray.sort(function (a, b) {
  var aSize = a.gsize;
  var bSize = b.gsize;
  var aLow = a.glow;
  var bLow = b.glow;
  console.log(aLow + " | " + bLow);      
  return (aSize < bSize) ? -1 : (aSize > bSize) ? 1 : ( (aLow < bLow ) ? -1 : (aLow > bLow ) ? 1 : 0 );
});

score 3 · Answer 9 · answered May 25 '11 at 19:49

grouperArray.sort(function (a, b) {
     var aSize = a.gsize;     
     var bSize = b.gsize;     
     var aLow = a.glow;
     var bLow = b.glow;
     console.log(aLow + " | " + bLow);
     return (aSize < bSize) ? -1 : (aSize > bSize) ? 1 : (aLow < bLow) ? -1 : (aLow > bLow) ? 1 : 0); });

score 3 · Answer 10 · answered May 12 '20 at 17:32

A dynamic way to do that with MULTIPLE keys:

filter unique values from each col/key of sort
put in order or reverse it
add weights width zeropad for each object based on indexOf(value) keys values
sort using caclutated weights

Object.defineProperty(Array.prototype, 'orderBy', {
value: function(sorts) { 
    sorts.map(sort => {            
        sort.uniques = Array.from(
            new Set(this.map(obj => obj[sort.key]))
        );

        sort.uniques = sort.uniques.sort((a, b) => {
            if (typeof a == 'string') {
                return sort.inverse ? b.localeCompare(a) : a.localeCompare(b);
            }
            else if (typeof a == 'number') {
                return sort.inverse ? (a < b) : (a > b ? 1 : 0);
            }
            else if (typeof a == 'boolean') {
                let x = sort.inverse ? (a === b) ? 0 : a? -1 : 1 : (a === b) ? 0 : a? 1 : -1;
                return x;
            }
            return 0;
        });
    });

    const weightOfObject = (obj) => {
        let weight = "";
        sorts.map(sort => {
            let zeropad = `${sort.uniques.length}`.length;
            weight += sort.uniques.indexOf(obj[sort.key]).toString().padStart(zeropad, '0');
        });
        //obj.weight = weight; // if you need to see weights
        return weight;
    }

    this.sort((a, b) => {
        return weightOfObject(a).localeCompare( weightOfObject(b) );
    });

    return this;
}
});

Use:

// works with string, number and boolean
let sortered = your_array.orderBy([
    {key: "type", inverse: false}, 
    {key: "title", inverse: false},
    {key: "spot", inverse: false},
    {key: "internal", inverse: true}
]);

score 1 · Answer 11 · answered Jun 30 '13 at 23:14

This is what I use

function sort(a, b) {
    var _a = "".concat(a.size, a.glow);
    var _b = "".concat(b.size, b.glow);
    return _a < _b;
}

concat the two items as a string and they will be sorted by a string value. If you want you could wrap _a and _b with parseInt to compare them as numbers if you know they will be numerical.

score 1 · Answer 12 · answered May 31 '19 at 12:09

Here is the solution for the case, when you have a priority sort key, which might not exist in some particular items, so you have to sort by fallback keys.

An input data example (id2 is priority sort key):

const arr = [
    {id: 1},
    {id: 2, id2: 3},
    {id: 4},
    {id: 3},
    {id: 10, id2: 2},
    {id: 7},
    {id: 6, id2: 1},
    {id: 5},
    {id: 9, id2: 2},
    {id: 8},
];

And the output should be:

[ { id: 6, id2: 1 },
  { id: 9, id2: 2 },
  { id: 10, id2: 2 },
  { id: 2, id2: 3 },
  { id: 1 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 7 },
  { id: 8 } ]

The comparator function will be like:

arr.sort((a,b) => {
  if(a.id2 || b.id2) {
    if(a.id2 && b.id2) {
      if(a.id2 === b.id2) {
        return a.id - b.id;
      }
      return a.id2 - b.id2;
    }
    return a.id2 ? -1 : 1;
  }
  return a.id - b.id
});

P.S. In case if .id of .id2 can be zeros, consider to use typeof.

score 1 · Answer 13 · answered Mar 24 '21 at 09:09

Let's simplify.

Say you have an array of arrays:

let tmp = [
    [0, 1],
    [2, 1],
    [1, 1],
    [0, 0],
    [2, 0],
    [1, 0],
    [0, 2],
    [2, 2],
    [1, 2],
]

Executing:

tmp.sort((a, b) => {
    if (a[1] != b[1])
        return a[1] - b[1];
    else
        return a[0] - b[0];
})

Will yield:

[
    [0, 0],
    [1, 0],
    [2, 0],
    [0, 1],
    [1, 1],
    [2, 1],
    [0, 2],
    [1, 2],
    [2, 2]
]

score 1 · Answer 14 · answered Aug 23 '22 at 09:35

var items = [
    { name: "z - test item", price: "99.99", priority: 0, reviews: 309, rating: 2 },
    { name: "z - test item", price: "1.99", priority: 0, reviews: 11, rating: 0.5 },
    { name: "y - test item", price: "99.99", priority: 1, reviews: 99, rating: 1 },
    { name: "y - test item", price: "0", priority: 1, reviews: 394, rating: 3.5 },
    { name: "x - test item", price: "0", priority: 2, reviews: 249, rating: 0.5 }];

items.sort(function (a, b) {
    var nameA = a.name.toUpperCase(); 
    var nameB = b.name.toUpperCase();   
    var nameC = a.price.toUpperCase(); 
    var nameD = b.price.toUpperCase(); 

    if (nameA < nameB) {
            return -1;
        }
        if (nameA > nameB || nameC > nameD) {
            return 1;
        }

        // names must be equal
        return 0;
    });`

Hi @aafridah . Welcome to StackOverflow. Please consider adding a little bit of description while submitting a code snippet. Try to describe what your code does and how exactly will it solve the problem. — Iftieaq, Aug 29 '22 at 05:00

Xander · Answer 15 · 2011-05-25T19:55:14.973

0

grouperArray.sort(function (a, b) {
    var aSize = a.gsize;
    var bSize = b.gsize;
    if (aSize !== aSize)
        return aSize - bSize;
    return a.glow - b.glow;
});

not tested, but I think that should work.

edited May 25 '11 at 19:55

answered May 25 '11 at 19:49

Xander

687
9
15

score 0 · Answer 16 · answered May 25 '11 at 19:50

0

grouperArray.sort(
  function(a,b){return a.gsize == b.gsize ? a.glow - b.glow : a.gsize - b.gsize}
);

answered May 25 '11 at 19:50

ic3b3rg

14,629
4
30
53

score 0 · Answer 17 · answered Oct 06 '20 at 03:57

In my case, i sort notification list by param 'important' and by 'date'

step 1: i filter notifications by 'important' and unImportant

let importantNotifications = notifications.filter(
        (notification) => notification.isImportant);

  let unImportantNotifications = notifications.filter(
        (notification) => !notification.isImportant);

step 2: i sort them by date

  sortByDate = (notifications) => {
  return notifications.sort((notificationOne, notificationTwo) => {
    return notificationOne.date - notificationTwo.date;
  });
};

step 3: merge them

[
    ...this.sortByDate(importantNotifications),
    ...this.sortByDate(unImportantNotifications),
  ];

score 0 · Answer 18 · answered Feb 04 '21 at 10:30

0

If you're happy to use the new tidy.js package you can achieve this with

tidy(input_array,
  arrange(['var1', desc('var2')])
);

answered Feb 04 '21 at 10:30

geotheory

22,624
29
119
196

score 0 · Answer 19 · answered Aug 02 '22 at 12:28

Besides the other answers here I got inconsistent data on my arrays where 1 wanted a primary ASC sort on field x and a secondary DESC sort on field y.
The solution is in giving the primary sort more importance by multiplying the number with lets say 1000000000

arrayOfObjects.sort((a, b) => {
    return (
        // Multiply by a high number to the most important sort, that makes them heavier than the second sort

        // First sort ASC (notice the - minus in the end instead of the || in other answers !)
        (a.paramX * 1000000000) -
        (b.paramX * 1000000000) -

        // Second sort DESC (switch them if you want ASC too)
        (a.paramY - b.paramY)
    )
})

for sorting on multiple dates on the object it is this:

// param date1 ASC and param date2 DESC
arrayOfObjects.sort((a, b) => {
    return (
        (a.date1.getTime() * 1000000000) -
        (b.date1.getTime() * 1000000000) -
        (a.date2.getTime() - b.date2.getTime())
    )
})

sort Javascript array by two numeric fields

19 Answers19

Linked

Related