Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Sort array of objects by string property value in JavaScript
The given task is to sort an array of objects by using string property value in JavaScript.
Assume there is an array of objects and we need to sort those elements by using the string property. In this below scenario, we are sorting array of objects by "Company" property.
const array = [
{Company: 'Oneplus', Manufacturing: 'China'},
{Company: 'Samsung', Manufacturing: 'South korea'},
{Company: 'Nothing', Manufacturing: 'India'}
];
// Output after sorting by "Company" property:
[
{"Company":"Nothing","Manufacturing":"India"},
{"Company":"Oneplus","Manufacturing":"China"},
{"Company":"Samsung","Manufacturing":"South korea"}
]
We can achieve this task by using the sort() method with a custom compare function.
The sort() Method
The sort() method sorts all the elements in an array and returns the sorted array. By default, it sorts elements as strings in ascending order.
Syntax
Array.sort(compareFunction)
Compare Function
The compare function returns negative, zero, or positive values depending upon the arguments being compared.
function(a, b) {
// Return negative if a should come before b
// Return 0 if a equals b
// Return positive if a should come after b
}
Note: The sort() method uses the compare function to determine the order of elements:
If the result is negative, a will be sorted before b
If the result is 0, no change in order
If the result is positive, b will be sorted before a
Example 1: Sorting in Ascending Order
Following is an example where an array of objects has been sorted by using string property value in ascending order:
<!DOCTYPE html>
<html>
<head>
<title>Sort array of objects by string property value</title>
</head>
<body>
<button onClick="fun()"> Click to sort </button>
<p id="para"></p>
<script>
function fun() {
function func(object1, object2) {
if (object1.Company < object2.Company)
return -1;
if (object1.Company > object2.Company)
return 1;
return 0;
}
const array = [
{Company: 'Oneplus', Manufacturing: 'China'},
{Company: 'Samsung', Manufacturing: 'South korea'},
{Company: 'Nothing', Manufacturing: 'India'}
];
array.sort(func);
document.getElementById("para").innerHTML = "After sorting "Company" in ascending order: " + JSON.stringify(array);
}
</script>
</body>
</html>
Example 2: Sorting in Descending Order
Following is an example to sort array of objects by using string property value in descending order:
<!DOCTYPE html>
<html>
<head>
<title>Sort array of objects by string property value</title>
</head>
<body>
<button onClick="fun()"> Click to sort </button>
<p id="para"></p>
<script>
function fun() {
function func(object1, object2) {
// For descending order, reverse the comparison
if (object1.Manufacturing > object2.Manufacturing)
return -1;
if (object1.Manufacturing < object2.Manufacturing)
return 1;
return 0;
}
const array = [
{Company: 'Oneplus', Manufacturing: 'China'},
{Company: 'Samsung', Manufacturing: 'South korea'},
{Company: 'Nothing', Manufacturing: 'India'}
];
array.sort(func);
document.getElementById("para").innerHTML = "After sorting "Manufacturing" in descending order: " + JSON.stringify(array);
}
</script>
</body>
</html>
Modern Approach Using Arrow Functions
You can also use arrow functions for a more concise syntax:
const companies = [
{Company: 'Oneplus', Manufacturing: 'China'},
{Company: 'Samsung', Manufacturing: 'South korea'},
{Company: 'Nothing', Manufacturing: 'India'}
];
// Ascending order
const ascending = companies.sort((a, b) => a.Company.localeCompare(b.Company));
console.log("Ascending:", ascending);
// Descending order
const descending = companies.sort((a, b) => b.Company.localeCompare(a.Company));
console.log("Descending:", descending);
Ascending: [
{ Company: 'Nothing', Manufacturing: 'India' },
{ Company: 'Oneplus', Manufacturing: 'China' },
{ Company: 'Samsung', Manufacturing: 'South korea' }
]
Descending: [
{ Company: 'Samsung', Manufacturing: 'South korea' },
{ Company: 'Oneplus', Manufacturing: 'China' },
{ Company: 'Nothing', Manufacturing: 'India' }
]
Conclusion
Use the sort() method with a custom compare function to sort arrays of objects by string properties. The localeCompare() method provides a cleaner approach for string comparisons and handles special characters properly.
3K+ Views
