. Advertisement .
..3..
. Advertisement .
..4..
You are currently in a blur learning your way through on JavaScript sort array of objects by property? This instruction is indeed what you call for! Check out and grasp more!
How To Implement JavaScript Sort Array Of Objects By Property?
Typically, the sort() function in JavaScript is used to order an array of items. Using this technique, the array members are then sorted alphabetically, not numerically.
For further customization, we can also use the reverse() function to fetch the elements in reverse order.
The point is you will need different ways to sort an array of objects when based on different properties.
Method #1: Sort an array of objects by strings
Let’s say we are working with strings. The required outcome in this case can be achieved by combining the localeCompare() method with the sort() function.
Running the code:
let students = [
{
fname : "Robin",
lname : "Dan",
age : 16
},
{
fname : "Zac",
lname : "Amin",
age : 20
},
{
fname : "Alex",
lname : "Moho",
age : 15
}
];
students.sort((a, b) => a.lname.localeCompare(b.lname));
console.log(students);
Output:
[
{ fname: 'Zac', lname: 'Amin', age: 20 },
{ fname: 'Robin', lname: 'Dan', age: 16 },
{ fname: 'Anadi', lname: 'Moho', age: 15 }
]
Keep in mind that the localeCompare() function only compares strings. This is not applicable to numbers.
Method #2: Sort an array of objects by numbers
Because the sort() technique typically does not work with numbers, we must include a comparison function in order to obtain the sorted array based on some numerical feature.
Running the code:
let students = [
{
fname : "Robin",
lname : "Dan",
age : 16
},
{
fname : "Zac",
lname : "Amin",
age : 20
},
{
fname : "Alex",
lname : "Moho",
age : 15
}
];
students.sort((a, b) => {
return a.age - b.age;
});
console.log(students);
As you can see, the aforementioned example compares the objects’ ages and arranges them according to these ages. Since the comparison function is only one line long, the sort() method already includes it.
Use the reverse() method to sort everything descending. Otherwise, we can also alternatively change the comparison function’s order to produce the results in descending order.
Running the code:
let students = [
{
fname : "Rohan",
lname : "Dalal",
age : 19
},
{
fname : "Robin",
lname : "Dan",
age : 16
},
{
fname : "Zac",
lname : "Amin",
age : 20
},
{
fname : "Alex",
lname : "Moho",
age : 15
}
];
students.sort((a, b) => {
return b.age - a.age;
});
console.log(students);
Output:
[
{ fname: 'Zac', lname: 'Amin', age: 20 },
{ fname: 'Robin', lname: 'Dan', age: 16 },
{ fname: 'Anadi', lname: 'Moho', age: 15 }
]
Method #3: Create A User-Defined Compare Function
When comparing an array of objects based on a property, the conventional sort() function may occasionally lag behind. In order to use the sort() method with a user-defined comparison function, we can do so.
The properties of the objects in an array are compared using this function. The example that follows demonstrates how to create a custom comparison function.
Running the code:
let students = [
{
fname : "Robin",
lname : "Dan",
age : 16
},
{
fname : "Zac",
lname : "Amin",
age : 20
},
{
fname : "Alex",
lname : "Moho",
age : 16
}
];
function compare_lname( a, b )
{
if ( a.lname.toLowerCase() < b.lname.toLowerCase()){
return -1;
}
if ( a.lname.toLowerCase() > b.lname.toLowerCase()){
return 1;
}
return 0;
}
students.sort(compare_lname);
console.log(students)
Output:
[
{ fname: 'Zac', lname: 'Amin', age: 20 },
{ fname: 'Robin', lname: 'Dan', age: 16 },
{ fname: 'Anadi', lname: 'Moho', age: 16 }
]
Conclusion
Above is all that you need to know regarding Javascript sort array of objects by property. Hopefully, this post can be of great help to you. See then!
Leave a comment