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: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — rgthree
– rgthree, Commented Jun 19, 2017 at 5:06
Possible duplicate of Sort array of objects by string property value in JavaScript — Mohammad Hamedani
– Mohammad Hamedani, Commented Jun 19, 2017 at 5:08

Ambroise Rabier · Accepted Answer · 2022-06-20 15:17:47Z

6

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; }

edited Jun 20, 2022 at 15:17

Ambroise Rabier

4,2125 gold badges33 silver badges41 bronze badges

answered Jun 19, 2017 at 5:41

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

Invalid · Accepted Answer · 2017-06-19 05:07:32Z

2

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;
});

answered Jun 19, 2017 at 5:07

Invalid

661 silver badge5 bronze badges

Comments

Rick · Accepted Answer · 2017-06-20 06:39:14Z

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, 2017 at 6:39

answered Jun 20, 2017 at 1:17

Rick

1,05511 silver badges18 bronze badges

2 Comments

jatin grover Over a year ago

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.

Rick Over a year ago

@jatingrover if you just want to sort dates, just use localeCompare

Neeraj Pathak · Accepted Answer · 2017-06-19 05:11:11Z

0

<!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....

answered Jun 19, 2017 at 5:11

Neeraj Pathak

7594 silver badges13 bronze badges

Comments

Bhupesh · Accepted Answer · 2017-06-19 05:15:32Z

0

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/

answered Jun 19, 2017 at 5:15

Bhupesh

8817 silver badges16 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 19, 2017 at 5:19

Alex H.

897 bronze badges

Comments

Hassan Imam · Accepted Answer · 2017-06-19 05:36:13Z

0

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);

edited Jun 19, 2017 at 5:36

answered Jun 19, 2017 at 5:25

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Comments

dork · Accepted Answer · 2017-06-19 08:04:28Z

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);

Felix Furtmayr · Accepted Answer · 2023-11-01 23:39:58Z

0

easy and understandable:

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(compareMultiple(['name', '-total']));

function compareMultiple (criteria) {
   return function (a, b) {
      for (let key of criteria) {
         var order = key.includes('-') ? -1 : 1;
         if (!a[key]) return -order;
         if (!b[key]) return order;
         if (!a[key] && ![key]) return 0;
         if (a[key] > b[key]) return order;
         if (a[key] < b[key]) return -order;
      }
      return 0;
   };
}

edited Nov 1, 2023 at 23:39

answered Nov 1, 2023 at 23:25

Felix Furtmayr

4214 silver badges4 bronze badges

Collectives™ on Stack Overflow

Multiple sort in JavaScript

9 Answers 9

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related