Sorting a list of objects is a common operation in programming, and TypeScript makes it straightforward. In this article, I will demonstrate how to sort a list of objects based on different types of properties, including strings, numbers, and dates, with clear examples to guide you through the process.
![Sorting object]()
How to Sort a List of Objects in TypeScript?
Sorting a list of objects in TypeScript is simple using the built-in sort() method.
- Sorting Objects by String Properties
- Sorting Objects by Numeric Properties
- Sorting Objects by Date Properties
- Sorting Objects by Multiple Properties
Let's create a list of objects with data to demonstrate the sorting functionality in TypeScript. In this example, I'll define an Employee object with four properties: ID, Name, Age, and HiringDate.
Sorting Objects by String Properties
interface Employee {
id : number;
name: string;
age: number;
hiringdate : Date;
}
const employees: Employee[] = [
{id:1, name: "Jignesh", age: 35,hiringdate: new Date("2024-12-01") },
{id:2, name: "Dawid", age: 45,hiringdate: new Date("2023-06-15") },
{id:3, name: "Dan", age: 30, hiringdate: new Date("2024-01-10" )}
];
// Sorting alphabetically by name
employees.sort((a, b) => a.name.localeCompare(b.name));
console.log(employees);
Output
[{
"id": 3,
"name": "Dan",
"age": 30,
"hiringdate": "2024-01-10T00:00:00.000Z"
}, {
"id": 2,
"name": "Dawid",
"age": 45,
"hiringdate": "2023-06-15T00:00:00.000Z"
}, {
"id": 1,
"name": "Jignesh",
"age": 35,
"hiringdate": "2024-12-01T00:00:00.000Z"
}]
Sorting Objects by Numeric Properties
const employees: Employee[] = [
{id:1, name: "Jignesh", age: 35,hiringdate: new Date("2024-12-01") },
{id:2, name: "Dawid", age: 45,hiringdate: new Date("2023-06-15") },
{id:3, name: "Dan", age: 30, hiringdate: new Date("2024-01-10" )}
];
// Sorting number property Age by Ascending
employees.sort((a, b) => a.age - b.age);
console.log(employees);
// Sorting number property age by Descending
employees.sort((a, b) => b.age - a.age);
console.log(employees);
Output: Sorting number property age by Ascending.
[{
"id": 3,
"name": "Dan",
"age": 30,
"hiringdate": "2024-01-10T00:00:00.000Z"
}, {
"id": 1,
"name": "Jignesh",
"age": 35,
"hiringdate": "2024-12-01T00:00:00.000Z"
}, {
"id": 2,
"name": "Dawid",
"age": 45,
"hiringdate": "2023-06-15T00:00:00.000Z"
}]
Output: Sorting number property age by descending.
[{
"id": 2,
"name": "Dawid",
"age": 45,
"hiringdate": "2023-06-15T00:00:00.000Z"
}, {
"id": 1,
"name": "Jignesh",
"age": 35,
"hiringdate": "2024-12-01T00:00:00.000Z"
}, {
"id": 3,
"name": "Dan",
"age": 30,
"hiringdate": "2024-01-10T00:00:00.000Z"
}]
Sorting Objects by Date Properties
// Sorting date by hiringdate ascending
employees.sort((a, b) => {
if (a.hiringdate.getTime() === b.hiringdate.getTime()) {
return a.name.localeCompare(b.name); // Sort by name if dates are equal
}
return b.hiringdate.getTime() - a.hiringdate.getTime(); // Sort by date first
});
console.log(employees);
// Sorting date by hiringdate descending
employees.sort((a, b) => {
if (a.hiringdate.getTime() === b.hiringdate.getTime()) {
return a.name.localeCompare(b.name); // Sort by name if dates are equal
}
return b.hiringdate.getTime() - a.hiringdate.getTime(); // Sort by date first
});
console.log(employees);
Output: Sorting date by hiring date ascending.
[{
"id": 2,
"name": "Dawid",
"age": 45,
"hiringdate": "2023-06-15T00:00:00.000Z"
}, {
"id": 3,
"name": "Dan",
"age": 30,
"hiringdate": "2024-01-10T00:00:00.000Z"
}, {
"id": 1,
"name": "Jignesh",
"age": 35,
"hiringdate": "2024-12-01T00:00:00.000Z"
}]
Output: Sorting date by hiring date descending.
[{
"id": 1,
"name": "Jignesh",
"age": 35,
"hiringdate": "2024-12-01T00:00:00.000Z"
}, {
"id": 3,
"name": "Dan",
"age": 30,
"hiringdate": "2024-01-10T00:00:00.000Z"
}, {
"id": 2,
"name": "Dawid",
"age": 45,
"hiringdate": "2023-06-15T00:00:00.000Z"
}]
Sorting Objects by Multiple Properties
Let's sort by multiple properties, such as hiring date and name. If the dates are equal, I will sort by the name field in ascending order. To demonstrate this, we'll create sample data with two employees having the same hiring date and then apply the sorting to test the functionality.
const employees: Employee[] = [
{id:1, name: "Jignesh", age: 35,hiringdate: new Date("2024-01-10") },
{id:2, name: "Dawid", age: 45,hiringdate: new Date("2023-06-15") },
{id:3, name: "Dan", age: 30, hiringdate: new Date("2024-01-10" )}
];
// Sorting date by hiringdate ascending
employees.sort((a, b) => {
if (a.hiringdate.getTime() === b.hiringdate.getTime()) {
return a.name.localeCompare(b.name); // Sort by name ascending order if hiringdates are equal
}
return b.hiringdate.getTime() - a.hiringdate.getTime(); // Sort by hiringdate first
});
console.log(employees);
Output: if hiring dates are equal then sort by name in ascending order.
[{
"id": 3,
"name": "Dan",
"age": 30,
"hiringdate": "2024-01-10T00:00:00.000Z"
}, {
"id": 1,
"name": "Jignesh",
"age": 35,
"hiringdate": "2024-01-10T00:00:00.000Z"
}, {
"id": 2,
"name": "Dawid",
"age": 45,
"hiringdate": "2023-06-15T00:00:00.000Z"
}]
const employees: Employee[] = [
{id:1, name: "Jignesh", age: 35,hiringdate: new Date("2024-01-10") },
{id:2, name: "Dawid", age: 45,hiringdate: new Date("2023-06-15") },
{id:3, name: "Dan", age: 30, hiringdate: new Date("2024-01-10" )}
];
// Sorting date by hiringdate ascending
employees.sort((a, b) => {
if (a.hiringdate.getTime() === b.hiringdate.getTime()) {
return b.name.localeCompare(a.name); // Sort by name descending order if hiringdates are equal
}
return b.hiringdate.getTime() - a.hiringdate.getTime(); // Sort by hiringdate desceing first
});
console.log(employees);
Output: First, sort by HiringDate in descending order. If the dates are equal, then sort by Name in descending order as well.
[{
"id": 1,
"name": "Jignesh",
"age": 35,
"hiringdate": "2024-01-10T00:00:00.000Z"
}, {
"id": 3,
"name": "Dan",
"age": 30,
"hiringdate": "2024-01-10T00:00:00.000Z"
}, {
"id": 2,
"name": "Dawid",
"age": 45,
"hiringdate": "2023-06-15T00:00:00.000Z"
}]
Summary
This article offers a complete guide to sorting lists of objects in TypeScript using the sort() method. It covers various scenarios, including sorting by string properties, numeric properties, date properties, and multiple properties. With these examples, developers can utilize flexible sorting techniques to manage data effectively in TypeScript applications.
For further reading, please take a look at my other article.
- Interview Question : Enhance SQL Server Stored Procedure Performance – Tuning Tips
- How To Import Data From Excel Data Into SQL Table In Microsoft SQL Server 2016
- Interview Question : Difference Between IQueryable, IEnumerable, And IList In LINQ
- Common Coding interview question for .Net developer
- How To Export Data In EXCEL, PDF, CSV, Word, JSON, XML And Text File In MVC Application