Navigate back to the homepage

How to sort an array of objects by a property value in typescript?

Infinitbility
TypeScript
November 28th, 2021 · 1 min read
How to sort an array of objects by a property value in typescript?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

TypeScript almost has the same syntax to do sorting of objects of array-like javascript i.e .sort() but in this tutorial, we will learn to do sorting of array-based on objects and how to use .sort() in typescript.

Here, we will learn to

  1. defined object structure using the interface
  2. use interface to create an array of objects
  3. use sort with static typing to sort an array

Let’s start today’s tutorial How to sort an array of objects by a property value in typescript?

Before creating an array of objects, we have to define the structure of objects it’s standard of typescript.

Here, the structure of our object ( interface ) which we are going to use to create an array of objects.

1interface user {
2 id: number,
3 name: string,
4};

Now, time to create an array of objects using our interface user.

1let users: Array<user> = [
2 { id: 1, name: 'infinit' },
3 { id: 2, name: 'bility' },
4 { id: 3, name: 'infinitbility' },
5];

After creating, an array of objects users it’s time to sort array using name property value.

1users.sort((a: user, b: user) => (a.name > b.name) ? 1 : -1);

it will sort an array of objects users by their name property value alphabetical wise…

Here, complete code example with output.

users.ts

1interface user {
2 id: number,
3 name: string,
4};
5
6let users: Array<user> = [
7 { id: 1, name: 'infinit' },
8 { id: 2, name: 'bility' },
9 { id: 3, name: 'infinitbility' },
10];
11
12users.sort((a: user, b: user) => (a.name > b.name) ? 1 : -1);

Output

Array of objects, sorting, typescript, Example

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to make tooltip clickable in react material UI?

How to make tooltip clickable in react material UI?

Example of creating clickable tooltip componant in react.

November 27th, 2021 · 1 min read
How to add key and value in array of objects in javascript?

How to add key and value in array of objects in javascript?

Example of add key and value in array of objects in javascript, React, React Native, vue, node, deno, and all javascript framework.

November 26th, 2021 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]