How to Sort a List of Objects in TypeScript by Property

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.