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
Selected Reading
Sorting JavaScript object by length of array properties.
In JavaScript, you can sort objects by the length of their array properties using the sort() method with a custom comparison function. This is useful when organizing data based on array sizes.
Syntax
array.sort((a, b) => a.property.length - b.property.length);
Example: Sorting Students by Number of Subjects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sort by Array Length</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
margin-top: 20px;
padding: 10px;
background: #f5f5f5;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Sorting JavaScript Objects by Array Property Length</h1>
<button onclick="sortStudents()">Sort by Subject Count</button>
<div id="result" class="result"></div>
<script>
let students = [
{ name: "Rohan", subjects: ["Maths", "Science", "EVS", "SST"] },
{ name: "Mohan", subjects: ["Maths", "Science", "SST"] },
{ name: "Shawn", subjects: ["Maths", "Physics", "Chemistry", "Biology", "German"] },
{ name: "Michael", subjects: ["Biology", "Hindi", "Sanskrit", "SST", "EVS", "Maths"] }
];
function sortStudents() {
// Sort by array length (ascending)
let sortedStudents = students.sort((a, b) => a.subjects.length - b.subjects.length);
let output = "<h3>Students sorted by number of subjects:</h3>";
sortedStudents.forEach(student => {
output += `<p><strong>${student.name}</strong>: ${student.subjects.length} subjects</p>`;
});
document.getElementById("result").innerHTML = output;
console.log("Sorted students:", sortedStudents);
}
</script>
</body>
</html>
Sorting Methods
Ascending Order (Smallest to Largest)
let data = [
{ name: "John", hobbies: ["reading", "gaming"] },
{ name: "Alice", hobbies: ["cooking"] },
{ name: "Bob", hobbies: ["sports", "music", "travel"] }
];
// Sort ascending by hobbies array length
data.sort((a, b) => a.hobbies.length - b.hobbies.length);
console.log("Ascending order:");
data.forEach(person => console.log(`${person.name}: ${person.hobbies.length} hobbies`));
Ascending order: Alice: 1 hobbies John: 2 hobbies Bob: 3 hobbies
Descending Order (Largest to Smallest)
// Sort descending by hobbies array length
data.sort((a, b) => b.hobbies.length - a.hobbies.length);
console.log("Descending order:");
data.forEach(person => console.log(`${person.name}: ${person.hobbies.length} hobbies`));
Descending order: Bob: 3 hobbies John: 2 hobbies Alice: 1 hobbies
Comparison Table
| Sort Order | Comparison Function | Result |
|---|---|---|
| Ascending | a.property.length - b.property.length |
Smallest arrays first |
| Descending | b.property.length - a.property.length |
Largest arrays first |
How It Works
The sort() method uses a comparison function that returns:
- Negative value: First element comes before second
- Zero: Elements are equal
- Positive value: First element comes after second
By subtracting array lengths (a.length - b.length), we get the proper sorting order based on size.
Conclusion
Sorting objects by array property length is straightforward using sort() with length comparison. Use a.length - b.length for ascending order and b.length - a.length for descending order.
Advertisements
