Sort an array of objects in typescript?
Last Updated :
01 May, 2024
We can achieve the sorting in TypeScript using the sort() function which is an inbuilt TypeScript function that is used to sort the elements of an array.
Below are a few examples showing the sorting in TypeScript.
Example 1: In this example, we will learn how to use the sort function to sort the array of objects based on object properties.
JavaScript
const course = [
{ name: "HTML", cost: 30 },
{ name: "CSS", cost: 25 },
{ name: "Typescript", cost: 35 },
];
console.log("Before Sorting");
console.log(course);
course.sort((a, b) => a.cost - b.cost);
console.log("After Sorting");
console.log(course);
Output:
Example 2: This example defines an interface Student, creates an array of Student objects, and then demonstrates how to sort them by name and ID in both ascending and descending orders using the sort method. It's essential to use the slice method to create a copy of the array before sorting to avoid modifying the original array.
JavaScript
interface Student {
name: string;
id: number;
}
const students: Student[] = [
{ name: "Ram", id: 102 },
{ name: "Shyam", id: 105 },
{ name: "Aman", id: 103 },
{ name: "Shri", id: 101 },
];
// Sort by name in ascending order
const studentsByNameAscending =
students.slice()
.sort((a, b) =>
a.name.localeCompare(b.name));
// Sort by name in descending order
const studentsByNameDescending =
students.slice()
.sort((a, b) =>
b.name.localeCompare(a.name));
// Sort by ID in ascending order
const studentsByIdAscending =
students.slice()
.sort((a, b) =>
a.id - b.id);
// Sort by ID in descending order
const studentsByIdDescending =
students.slice()
.sort((a, b) =>
b.id - a.id);
console
.log("Students sorted by name (ascending):",
studentsByNameAscending);
console
.log("Students sorted by name (descending):",
studentsByNameDescending);
console
.log("Students sorted by ID (ascending):",
studentsByIdAscending);
console
.log("Students sorted by ID (descending):",
studentsByIdDescending);
Output:
Example 3: Using Lodash Library
In this approach, we leverage the sortBy() function from the lodash library to sort the array of objects based on specified criteria. sortBy() simplifies the sorting process by allowing us to specify the object property to sort by.
To use lodash, you need to install it via npm:
npm install lodash
Once installed, you can import sortBy from lodash into your TypeScript file and use it to sort the array of objects.
Syntax:
import sortBy from 'lodash/sortBy';
const sortedArray = sortBy(array, [propertyName]);
- array: The array of objects to be sorted.
- propertyName: The property of the objects by which to sort.
Example: The following example demonstrates how to use lodash to sort an array of objects in TypeScript.
JavaScript
import sortBy from 'lodash/sortBy';
interface Student {
name: string;
id: number;
}
const students: Student[] = [
{ name: "Nikunj", id: 102 },
{ name: "Shyam", id: 105 },
{ name: "Aman", id: 103 },
{ name: "Shri", id: 101 },
];
// Sort by name in ascending order
const studentsByNameAscending = sortBy(students, ['name']);
// Sort by id in ascending order
const studentsByIdAscending = sortBy(students, ['id']);
console.log("Students sorted by name (ascending):", studentsByNameAscending);
console.log("Students sorted by id (ascending):", studentsByIdAscending);
Output:
Similar Reads
How to Sort an Array of Object using a Value in TypeScript ? Sorting an array of objects using a value in TypeScript pertains to the process of arranging an array of objects in a specified order based on a particular property or value contained within each object. The below approaches can be used to sort an array of objects using a value in TypeScript: Table
3 min read
How to Iterate Array of Objects in TypeScript ? In TypeScript, we can iterate over the array of objects using various inbuilt loops and higher-order functions, We can use for...of Loop, forEach method, and map method. There are several approaches in TypeScript to iterate over the array of objects which are as follows:Table of ContentUsing for...o
3 min read
TypeScript Array sort() Method The sort() method in TypeScript sorts the elements of an array and returns the sorted array. By default, it sorts an array in ascending order. It can take an optional compareFunction to define the sort order, allowing for custom sorting logic.Syntaxarray.sort( compareFunction )Parameter: This method
2 min read
How to Sort an Array in TypeScript ? Array sorting is the process of arranging the elements within an array in a specified order, often either ascending or descending based on predetermined criteria. Below are the approaches used to sort an array in typescript: Table of Content Method 1: Using sort methodMethod 2: Spread OperatorMethod
3 min read
How can I Define an Array of Objects in TypeScript? In TypeScript, the way of defining the arrays of objects is different from JavaScript. Because we need to explicitly type the array at the time of declaration that it will be an Array of objects. In this article, we will discuss the different methods for declaring an array of objects in TypeScript.
6 min read
TypeScript Object The Array Type In TypeScript, the Array Type is used to specify and enforce the type of elements that can be stored in an array, enhancing type safety during development. This adaptability ensures reusability across diverse data types, as exemplified by the Array type (e.g., number[] or string[]). Syntaxlet myArra
2 min read