Sort array of objects in typescript [With 10 examples] - SPGuides (2024)

In this typescript tutorial, we will see how to sort an array of objects in typescript. We will cover different examples:

• What is sorting an array of objects in typescript
• typescript sort array of objects by value
• typescript sort array of objects by string property
• typescript sort array of objects by property alphabetically
• typescript sort array of objects by number
• typescript sort array of objects by name descending
• typescript sort array of objects by name ascending
• typescript sort array of objects by multiple properties
• sort array of objects in typescript by date
• typescript sort array of objects by boolean property

What is sorting an array of objects in typescript?

In TypeScript, sorting an array of objects means arranging the array’s items in a certain order depending on the values of one or more attributes of the objects in the array.

For example, you may want to sort an array of Person objects in ascending or descending order by the age field, or alphabetically by the name property.

To sort an array of objects in TypeScript, use the sort() function, which is accessible on all arrays in Typescript. The sort() method accepts a comparison function as a parameter, which determines the order of the items in the sorted array.

If the first object comes before the second, the comparison function should return a negative number, a positive number if the second object comes before the first, and 0 if the order of the objects does not change.

Depending on the desired sort order, the comparison function can compare one or more characteristics of the items in the array.

The syntax of the sort method:

Array.sort(comparison function)

Typescript sort array of objects by value

Here we will see how to sort an array of objects by value with an example in typescript.

To sort an array of objects by a specific property value, we can use the sort() method in TypeScript with a custom comparison function that compares the values of that property for each object.

For example, we have an array of Candidate objects with two properties: name and age. We want to sort this array by the age property in ascending order in typescript.

For this, we will call the typescript sort() method on the candidate array and supply an argument of a custom comparison function.

This method in typescript compares the age properties of two Candidate objects, a and b, by subtracting b.age from a.age. If a.age is less than b.age, the outcome will be a negative number, a positive number if a.age is larger than b.age, and zero if they are equal.

Open the code editor, and create a file named as ‘ sortArrayOfObjects.ts’ file write the below code:

interface Candidate { name: string; age: number; } const person: Candidate[] = [ { name: "John", age: 43 }, { name: "Alex", age: 39 }, { name: "Bob", age: 33 } ]; person.sort((a, b) => a.age - b.age); console.log(person);

To compile the code and run the below command and you can see the result in the console:

ts-node sortArrayOfObjects.ts

This is an example of a typescript sort array of objects by value.

Read How to convert a string to boolean in typescript

Typescript sort array of objects by string property

Here we will see an example of how to sort an array of objects by string property in typescript.

For example, we have an array of Candidate objects with two properties: name and age. We want to sort this array by the typescript name property in ascending order.

For this, we will call the typescript sort() method on the candidate array and supply an argument of a custom comparison function.

This method in typescript compares the name properties of two Candidate objects, a and b, by subtracting b.name from a.name. If a.name is less than b.name, the outcome will be a negative number, a positive number if a.name is larger than b.name, and zero if they are equal.

In the sortArrayOfObjects.ts file write the below code

interface Candidate { name: string; age: number; } const person: Candidate[] = [ { name: "John", age: 43 }, { name: "Alex", age: 39 }, { name: "Bob", age: 33 } ]; person.sort((a, b) => a.name.localeCompare(b.name)); console.log(person);

To compile the code and run the below command and you can see the result in the console:

ts-node sortArrayOfObjects.ts

This is an example of a Typescript sort array of objects by string property.

Typescript sort array of objects by property alphabetically

Here we will see an example to sort an array of objects by property alphabetically in typescript.

For example, to sort an array of objects alphabetically by a property in TypeScript, you can use the sort() method of the Array object along with a comparison function.

For example, we have an array of objects Candidate that has a name property. We use the sort() method to sort the array, and we pass in a comparison function that compares the name property of two objects. The function returns 1 if a.name is greater than b.name, and -1 if a.name is less than b.name. This will sort the array in ascending order based on the name property.

In the sortArrayOfObjects.ts file write the below code:

interface Candidate { name: string; age: number; } const person: Candidate[] = [ { name: "John", age: 43 }, { name: "Alex", age: 39 }, { name: "Bob", age: 33 } ]; person.sort((a, b) => (a.name > b.name) ? 1 : -1) console.log(person);

To compile the code and run the below command, you can see the result in the console:

ts-node sortArrayOfObjects

This is an example of a typescript sort array of objects by property alphabetically.

Typescript sort array of objects by number

Here we will see an example of how we can sort an array of objects by number.

To sort an array of objects by a numeric property in TypeScript, we can use the Array.sort() method in combination with the localeCompare() function to compare the string representations of the numeric values.

For example, we have an array of Candidate objects with two properties: name and age. We want to sort this array by the typescript age property in ascending order.

For this, we will call the typescript sort() method on the candidate array and supply an argument of a custom comparison function.

This method in typescript compares the age properties of two Candidate objects, a and b, by subtracting b.age from a.age. If a.age is less than b.name, the outcome will be a negative number, a positive number if a.age is larger than b.age, and zero if they are equal.

In the sortArrayOfObjects.ts file write the below code:

interface Candidate { name: string; age: number; } const person: Candidate[] = [ { name: "John", age: 43 }, { name: "Alex", age: 39 }, { name: "Bob", age: 33 } ]; person.sort((a, b) => a.age.toString().localeCompare(b.age.toString())) console.log(person);

To compile the code and run the below command and you can see the result in the console:

ts-node sortArrayOfObjects.ts

This is an example of typescript sort array of objects by number.

Read How to check if string contains only numbers in typescript

Typescript sort array of objects by name descending

Here we will see an example of how to sort an array of objects by name descending in typescript.

To sort an array of objects by name in descending order using TypeScript, you can use the Array.sort() method in combination with a custom comparator function that compares the string values of the name property.

For example, we have an array of objects with two properties: age and name. We want to sort the array by the name property in descending order.

We will use the typescript Array.sort() method, which accepts a comparator function and compares two values, returning a negative number if the first value comes before the second, a positive number if the first comes after the second, or zero if they are equal.

To compare the name property of object b with that of object a, we use the string object’s localeCompare() function. If the result is negative, b should come before a; if the result is positive, b should come after aand if the result is zero, they are equal and their order remains unchanged.

After using person. sort() the array is sorted in decreasing order by the name property after using person.sort().

In the sortArrayOfObjects.ts file, write the below code:

 interface Candidate { name: string; age: number; } const person: Candidate[] = [ { name: "John", age: 43 }, { name: "Alex", age: 32 }, { name: "Bob", age: 33 } ]; person.sort((a, b) => b.name.localeCompare(a.name)) console.log(person);

To compile the code and run the below command and you can see the result in the console.

ts-node sortArrayOfObjects.ts

This is an example of Typescript sort array of objects by name descending

Typescript sort array of objects by multiple properties

Here we will see how to sort an array of objects by multiple properties using typescript.

To sort an array of objects by multiple properties in TypeScript, you can use the Array.sort() method in combination with a custom comparator function that compares the values of the properties in the desired order.

In this example, we have an array of objects with three properties: id, name, and age. We want to sort the array by the age property in ascending order and then by the name property in descending order in typescript.

We will create a comparator function first compares the age properties of the two objects. If they are not equal, it returns the difference between the age values, which will result in sorting by age in ascending order in the typescript.

If the age values are equal, it then compares the name properties of the two objects using localeCompare() in reverse order, which will result in sorting by name in descending order.

By calling person.sort(), the array is sorted by age in ascending order, and then by name in descending order.

In the sortArrayOfObjects.ts file, write the below code:

interface Candidate { id: number name: string; age: number; } const person: Candidate[] = [ { id:1,name: "John", age: 43 }, {id:3, name: "Alex", age: 32 }, { id:5,name: "Ron", age: 33 }, { id:5,name: "Ketty", age: 40 }, { id:5,name: "Rose", age: 39 } ]; person.sort((a, b) => { if (a.age !== b.age) { return a.age - b.age; } else { return b.name.localeCompare(a.name); } }) console.log(person);

To compile the code and run the below command and you can see the result in the console.

ts-node sortArrayOfObjects.ts

This is an example of a sort array of objects by multiple properties in typescript.

Read Typescript convert string to keyof

Sort array of objects in typescript by date

Here we will see an example to sort an array of objects in typescript by date.

For example, we have an array of objects with three properties: id, name, age and date. We want to sort the array by the date property in ascending order.

The comparator function accepts two parameters and returns a negative number if the first object’s date is earlier than the second object’s date, a positive number if the first object’s date is later than the second object’s date, and zero if they are equal.

We can compare the dates by using the Date object’s getTime() function, which provides the number of milliseconds since January 1, 1970 00:00:00 UTC. We may sort by date in ascending order by subtracting the getTime() values of the two objects.

In the sortArrayOfObjects.ts file, write the below code:

interface Candidate { id: number name: string; age: number; date:Date } const person: Candidate[] = [ { id:1,name: "John", age: 43, date: new Date('2022-01-01') }, {id:3, name: "Alex", age: 32, date: new Date('2022-02-01') }, { id:5,name: "Ron", age: 33, date: new Date('2022-03-01') }, { id:5,name: "Ketty", age: 40, date: new Date('2022-05-01') }, { id:5,name: "Rose", age: 39, date: new Date('2022-06-07') } ]; person.sort((a, b) => a.date.getTime() - b.date.getTime()) console.log(person);

To compile the code and run the below command and you can see the result in the console:

ts-node sortArrayOfObjects.ts

This is an example of Sort array of objects in typescript by date.

Read How to push an object into an array in Typescript

typescript sort array of objects by boolean property

Here we will see how to sort an array of objects by boolean property in typescript.

For example, we have an array of objects with three properties: id, name, and isComplete. We want to sort the array by the isComplete property in descending order.

Here, The comparator function takes two objects as arguments and returns a negative number if the first object’s isComplete value is true and the second object’s isComplete value is false, a positive number.

If the first object’s isComplete value is false and the second object’s isComplete value is true, or zero if they are equal. We can achieve this by using a ternary operator to return 1 or -1 depending on the isComplete value of the two objects.s.

In the sortArrayOfObjects.ts file, write the below code:

 interface Task { id: number; name: string; isComplete: boolean; } const tasks: Task[] = [ { id: 1, name: 'Task 1', isComplete: false }, { id: 2, name: 'Task 2', isComplete: true }, { id: 3, name: 'Task 3', isComplete: true }, { id: 4, name: 'Task 4', isComplete: false } ]; tasks.sort((a, b) => b.isComplete ? 1 : -1); console.log(tasks);

To compile the code and run the below command and you can see the result in the console:

ts-node sortArrayOfObjects.ts

This is an example of typescript sort array of objects by boolean property.

Conclusion

In this typescript tutorial, we saw how to sort an array of objects in typescript. Also, we have gone through different examples to sort an array of objects:

• What is sorting an array of objects in typescript
• typescript sort array of objects by value
• typescript sort array of objects by string property
• typescript sort array of objects by property alphabetically
• typescript sort array of objects by number
• typescript sort array of objects by name descending
• typescript sort array of objects by name ascending
• typescript sort array of objects by multiple properties
• sort array of objects in typescript by date
• typescript sort array of objects by boolean property

You may like the following typescript tutorials:

• Typescript string capitalize first letter
• Typescript split string by dot
• How to create a multiline string in typescript
• How to split a string with multiple separators in TypeScript?