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)
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.
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)
});
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);
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) ));
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) ));
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));
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!
Top comments (5)
Thank you ! great post, I'll add the use case when have two string columns and need to order. My solution was concat first and then a.localeCompare(b)
Ohhhh. At the beginning I thought there might be some edge cases your method might not work really well... but, it surely will get the job done. :D
That is a pretty neat work around !!
So I've tried this and the
II
doesn't work. Only the left side is respected and the other side ignored. It works if I do&&
🤔Muchas Gracias, me gusto tu articulo.
such clear and simple explanation, well done!