Sort array on multiple fields using JavaScript

Sorting, filtering, and searching are very common scenarios during development. In this article, I show you how to sort array on multiple fields using JavaScript.  Suppose you have an array of objects that contains several columns/fields.

Sort array on multiple fields using JavaScript

Now you have to sort the array on multiple fields like on Title and Date. The date would be sorted in Descending order and if the Date is blank or null then the array should be sorted on Title.

Do consider scenarios where any of these fields can contain NULL values. So in this sample, I will handle NULL values as well.

JavaScript sort() method –

The sort() method is used to sort the array in JavaScript. Sort() method determines the biggest value by comparing two values.

Like for below simple array –

var numbers = [10, 5, 9, 0, 4];
numbers.sort(function(a, b){
return a – b
})

Output

// [0, 4, 5, 9, 10]

Like in the above example I am subtracting “a” from “b” to know the bigger number.

This is the simple array example having only one field what about when you have multiple fields the real-world scenarios –

Sort array on multiple fields using JavaScript

Suppose you have below array that contains the country name in Title and Date –

 

0: {__metadata: {…}, Spokesperson: {…}, Title: ‘London’, Name: {…}, Date: ‘2022-01-25T06:00:00Z’}

1: {__metadata: {…}, Spokesperson: {…}, Title: ‘India’, Name: {…}, Date: ‘2022-01-20T06:00:00Z’}

2: {__metadata: {…}, Spokesperson: {…}, Title: ‘Turkey’, Name: {…}, Date: null}

3: {__metadata: {…}, Spokesperson: {…}, Title: ‘Australia’, Name: {…}, Date: ‘2022-01-19T06:00:00Z’}

4: {__metadata: {…}, Spokesperson: {…}, Title: ‘America’, Name: {…}, Date: null}

 

Now I want to sort on the date the latest date should come on first and if the date is null then the array should sort on Title. suppose my array name is country –

 

country.sort(function (a, b) { 
 var af = (a.Date != null) ? new Date(a.Date) : ''; 
 var bf = (b.Date != null) ? new Date(b.Date) : ''; 
 var as = (a.Title != null) ? a.Title : ''; 
 var bs = (b.Title != null) ? b.Title : ''; 
 if(af == bf) { 
  return (as < bs) ? -1 : (as > bs) ? 1 : 0; 
} 
else { 
 return (af < bf) ? 1 : -1; 
 } 
});

Explanation about the sort method above –

  • Loop through the array fields using a and b.
  • Compare the array fields of a with b.
  • Below is the significance of -1, 0, and 1.

-1: means a is sorted considered lower than b.

0: a and b are considered equal.

1: b is considered lower than a

 

This sort the array on Date descending and if the Date field having NULL or Blank it sort on Title ascending. Below is the output –

OutPut –

  1. 0: {__metadata: {…}, Title: ‘London’, Name: {…}, Date: ‘2022-01-25T06:00:00Z’}
  2. 1: {__metadata: {…}, Title: ‘India’, Name: {…}, Date: ‘2022-01-20T06:00:00Z’}
  3. 2: {__metadata: {…}, Title: ‘Australia’, Name: {…}, Date: ‘2022-01-19T06:00:00Z’}
  4. 3: {__metadata: {…}, Title: ‘America’, Name: {…}, Date: null}
  5. 4: {__metadata: {…}, Title: ‘Turkey’, Name: {…}, Date: null}

 

Conclusion

This is how you can use the sort method and sort array on multiple fields using JavaScript. The values are compared with each other in the sort method.