Multiple sort in JavaScript

Question

I have an array of objects like this:-

var arr = [ {total : 20, name: David},
{total : 10, name: Joe},
{total : 15, name: Tracy},
{total : 20, name: Joel},
{total : 15, name: Michael},
{total : 10, name: Arnold},
{total : 15, name: Paul},
]

I need to sort them first by total and then if the total of two are the same I need to sort them by name

My expected outcome after sort should be as follows:

var arr = [ {total : 20, name: David},
    {total : 20, name: Joel},
    {total : 15, name: Michael},
    {total : 15, name: Paul},
    {total : 15, name: Tracy},
    {total : 10, name: Arnold},
    {total : 10, name: Joe},
    ]

Can anyone tell me how to sort it using Array.sort()?

Did you try it yourself first? The Array.sort MDN entry nearly gives you the answer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort?v=example#Description — rgthree, Jun 19 '17 at 05:06
Possible duplicate of [Sort array of objects by string property value in JavaScript](https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript) — Mohammad Hamedani, Jun 19 '17 at 05:08

score 6 · Answer 1 · edited Jun 20 '22 at 15:17

You could chain the sort criteria with logical OR and use a delta for total and String#localeCompare for name.

// Sort by total then name.
var array = [
  {total: 20, name: 'David'},
  {total: 10, name: 'Joe'},
  {total: 15, name: 'Tracy'},
  {total: 20, name: 'Joel'},
  {total: 15, name: 'Michael'},
  {total: 10, name: 'Arnold'},
  {total: 15, name: 'Paul'}
];

array.sort(function (a, b) {
    return b.total - a.total || a.name.localeCompare(b.name);
});

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 2 · Answer 2 · answered Jun 19 '17 at 05:07

use Array.sort(callback)， the callback func has two parameter a、b are item in arrary， and return a int value if <0 a lt b else if = 0 a eq b else > 0 a gt b

arr.sort(function(a,b){
    return a.total == b.total ? (a.name > b.name ? 1: -1) : a.total-b.total;
});

Rick · Accepted Answer · 2017-06-20T06:39:14.450

1

var array = [{ total: 20, name: 'David' }, { total: 10, name: 'Joe' }, { total: 15, name: 'Tracy' }, { total: 20, name: 'Joel' }, { total: 15, name: 'Michael' }, { total: 10, name: 'Arnold' }, { total: 15, name: 'Paul' }];

array.sort(function(a, b) {
  return totalCompare(a, b) || a.name.localeCompare(b.name);
});
function totalCompare(a, b) {
  if (a.total === b.total) {
    return 0;
  }
  return b.total - a.total;
}
console.log(array);

edited Jun 20 '17 at 06:39

answered Jun 20 '17 at 01:17

Rick

1,035
10
18

Can anyone recommend how to do the same if the second item to compare is a date instead of name? In my scenario I want to sort the array based on names and them if there are duplicate names I want to sort the name with latest date. Please help me figure it out. – jatin grover Mar 02 '20 at 08:45
@jatingrover if you just want to sort dates, just use localeCompare – Rick Mar 03 '20 at 18:04

score 0 · Answer 4 · answered Jun 19 '17 at 05:11

<!DOCTYPE html>
<html>
<body>

<p>Click the button to sort the array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
    fruits.sort();
    document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

just like this....

score 0 · Answer 5 · answered Jun 19 '17 at 05:15

Using sort() method

var data = [ 
{total : '20', name: 'David'},
{total : '10', name: 'Joe'},
{total : '15', name: 'Tracy'},
{total : '20', name: 'Joel'},
{total : '15', name: 'Michael'},
{total : '10', name: 'Arnold'},
{total : '15', name: 'Paul'},
]

data.sort(function (x, y) {
    var n = x.total - y.total;
    if (n != 0) {
        return n;
    }
    return x.name - y.name;
});

var i;
for (i = 0; i < data.length; i++) {
     document.write("<p>total:" + data[i].total +" name:" + data[i].name + "</p>");
}

here runnig code https://jsfiddle.net/bhupeshkushwaha/jv3mng0y/

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort?v=example

The sort method can be conveniently used with function expressions (and closures):

This article talks about the two ways to use Array.sort()

One of them being the exact explanation you are looking for--passing a compareFunction to the method parameters of sort()

This will allow you to specify any function you want (within reason) to define the sort order.

Ex:

arrayname.sort(function(a, b){
    return b-a;
});

Would return the sorted array in descending order

Hassan Imam · Answer 7 · 2017-06-19T05:36:13.630

You can sort your array using custom sort function. Please use the link to know more about the sort function.

You can use the below code to sort.

arr.sort((a,b) => (b.total === a.total ? (a.name > b.name) : b.total - a.total));

Here is the solution of your problem.

var arr = [ {total : 20, name: 'David'},
{total : 10, name: 'Joe'},
{total : 15, name: 'Tracy'},
{total : 20, name: 'Joel'},
{total : 15, name: 'Michael'},
{total : 10, name: 'Arnold'},
{total : 15, name: 'Paul'}];

arr.sort((a,b) => (b.total === a.total ? (a.name > b.name) : b.total - a.total));

console.log(arr);

dork · Answer 8 · 2017-06-19T08:04:28.547

You can provide a sortObject which contains the keys with their respective directions (in order of sorting):

const sortObject = {
  total: -1, // Descending
  name: 1, // Ascending
};

You can then use that object to loop through the array for sorting:

const arr = [
  { total: 20, name: 'David' },
  { total: 10, name: 'Joe' },
  { total: 15, name: 'Tracy' },
  { total: 20, name: 'Joel' },
  { total: 15, name: 'Michael' },
  { total: 10, name: 'Arnold' },
  { total: 15, name: 'Paul' },
];

// Enter keys by sort order. Key values are -1 for descending and 1 for ascending.
const sortObject = {
  total: -1,
  name: 1,
};

// Get the keys of sortObject.
const sortKeys = Object.keys(sortObject);

const sortedArray = arr.sort((a, b) => {
  let sorted = 0;
  let index = 0;

  // Loop until sorted or until the sort keys have been processed.
  while (sorted === 0 && index < sortKeys.length) {
    const key = sortKeys[index];
    const sortDirection = sortObject[key];

    if (a[key] === b[key]) { // If the values are the same, do not change positions.
      sorted = 0;
    } else { // Switch positions if necessary. If b[key] > a[key], multiply by -1 to reverse directions.
      sorted = a[key] > b[key] ? sortDirection : -1 * sortDirection;
    }

    index++;
  }

  return sorted;
});

console.log(sortedArray);

Multiple sort in JavaScript

8 Answers8