JS: Sort an Array of Objects on multiple columns/keys
Tags: javascript, webdev, algorithms, beginners
Published: 2021-04-22 06:03:50

Let's see how you can completely configure the sorting of an Array of objects. Let's say we have the below data set for our entire example.
``` 
let objs = [
  { name: 'Mark',
    age: 30,
    RollNo: 'R01'
  },
  { name: 'Anne',
    age: 20,
    RollNo: 'R02'
  },
  { name: 'James',
    age: 40,
    RollNo: 'R03'
  },
  { name: 'Jerry',
    age: 30,
    RollNo: 'R04'
  },
  { name: 'Lucy',
    age: 30,
    RollNo: 'R05'
  },
  { name: 'Mark',
    age: 30,
    RollNo: 'R06'
  },
]
```
Looking at the raw data we have with a `console.table(objs)`
![Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdphmk8u69l8ozb4va2i.PNG) 



## Single Column Sort
Now say we want to sort this data across one column. The best way to do this is the sort() method. Check out the [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort).
An example from there down below on a simple array of Strings
```
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
```
The output is `["Dec", "Feb", "Jan", "March"]` 
This automatically sorts the **original** array in alphabetical order and returns the original array as well on calling sort(). 

#### Sorting on String
Using the above example, let us try and sort our object
```
objs.sort(function(a, b) {
    return a.name.localeCompare(b.name)
});
```
![Single Sort on Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v12q6yl1427r57sausim.PNG)
This is similar to a SQL Statement 
```
SELECT * FROM OBJS ORDER BY NAME; 
```

#### Sorting on number (the ES6 way)
With ES6, we can even write it as an inline function. Let's try and sort based on the number field age.
```
objs.sort((a, b) => a.age - b.age);
```
![Single Sort on Age](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jspephc1d6cmqlb3zmrd.PNG)
This is similar to a SQL Statement 
```
SELECT * FROM OBJS ORDER BY AGE; 
```



## Multi Column Sort
We can combine sorts using the || operator in the order of the sorting we need.
#### Sort by Age, and then Name
```
objs.sort((a,b)=> (a.age - b.age || a.name.localeCompare(b.name)  ));
```
![MultiSort on age and name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u27vu0k022o8rx8ige9d.PNG)
This is similar to a SQL Statement 
```
SELECT * FROM OBJS ORDER BY AGE, NAME; 
```
#### Sort by Name, and then Age
We can modify the order of how the sort is done. That is if we want to sort by name first and then age
```
objs.sort((a,b)=> (a.name.localeCompare(b.name) || a.age - b.age));
```
This is similar to a SQL Statement 
```
SELECT * FROM OBJS ORDER BY NAME, AGE; 
```


#### Changing to Descending order
If we wanted Age and Name to be descending order we just need to swap the above command with 
```
objs.sort((a,b)=> (b.age - a.age || b.name.localeCompare(a.name)  ));
```
![MultiSort on age and name Descending](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40fl85uthgaazevdl61l.PNG)
This is similar to a SQL Statement 
```
SELECT * FROM OBJS ORDER BY NAME DESC, AGE DESC; 
```


#### Extend to sort on all 3 columns 
Using the above logic, you can append how many ever sort columns you might need in the order you need them. 
```
objs.sort((a,b)=> (a.name.localeCompare(b.name) || a.age - b.age || a.RollNo - b.RollNo));
```
![MultiSort on 3 columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oplqkq3wyfq7nk6hvbbj.PNG) 
This is similar to a SQL Statement 
```
SELECT * FROM OBJS ORDER BY NAME , AGE , ROLLNO; 
```


### Use Case
Say you have an API that returns an Array of Objects in a random manner. Maybe you have a table in your UI and you want to sort this data that comes in such that it makes the most sense for your user(sort on some category or maybe price). All you need to do is tweak the above logic and tada!