How to Sort Object Array by property or key in Typescript?

In This tutorial, You will learn how to sort object arrays with keys or properties in typescript.

The object holds the key and value of a real entity. Object Array is a list of objects.

There are multiple ways we can sort object arrays using Sort Comparator.

Array object soring with comparison logic

Let’s declare an array of objects where each object holds id and name properties Following is an example of Sorting an array of objects in ascending order with the id property

var countries = [
    { id: 1, name: 'USA' },
    { id: 2, name: 'India' },
    { id: 3, name: 'Canada' }
];
let sortedCountries = countries.sort((first, second) => 0 - (first.id > second.id ? -1 : 1));
console.log(sortedCountries);

And the output:

[ { id: 1, name: 'Canada' },
  { id: 18, name: 'USA' },
  { id: 21, name: 'India' } ]

here is an example array object ordered in descending.

let descendingCountries = countries.sort((first, second) => 0 - (first.id > second.id ? 1 : -1));

Here is the output

[ { id: 21, name: 'India' },
  { id: 18, name: 'USA' },
  { id: 1, name: 'Canada' } ]

lodash sortBy objects with key strings

Lodash library provides many utility functions. sortBy is one of the methods for sorting an array.

First, install lodash npm or include lodash CDN library into your application.

syntax

sortBy(array or objects,[iteratekeys])

Input is an array of objects. iteratekeys are keys or properties that enable to sort

It returns a sorted array

Following is an `example for sorting objects with key values of an object array in ascending order.

• import all utilities using the import keyword
• an animal object has key-id, name, and values
• Declared animals array initialized with an animal object
• sortBy in lodash method takes an object array with keys
• Returns a sorted object array in id/name ascending order

import * as _ from 'underscore';

varanimals=[
    { id: 11, name: 'Zebra' },
    { id: 2, name: 'Elephant' },
    { id: 3, name: 'Cat' }
];
_.sortBy(animals,['name']);// sort by key name
_.sortBy(animals,['id']);// sort by key id

And the output is

[Object {id: 3, name: "Cat"}, Object {id: 2, name: "Elephant"}, Object {id: 1, name: "Zebra"}]
[Object {id: 2, name: "Elephant"}, Object {id: 3, name: "Cat"}, Object {id: 11, name: "Zebra"}]

Following an example for sort object array with multiple fields

sortBy second arguments accept iterate keys, please give multiple keys.

_.sortBy(animals,['id','name']);
_.sortBy(animals,['name','id']);

The first property is considered, if there is the same value for the first property, then sort these same values on a second property, please see the difference.

And the output is

[Object {id: 2, name: "Elephant"}, Object {id: 3, name: "Cat"}, Object {id: 11, name: "Zebra"}]
[Object {id: 3, name: "Cat"}, Object {id: 2, name: "Elephant"}, Object {id: 11, name: "Zebra"}]

underscore sortBy date property in the object array

Like the lodash library,underscore provides many utility functions for npm applications.sortByfunction in underscore provides sorting of an array of objects with multiple attributes. The syntax and usage are the same asLodash sortBy`.

In the following example, An object contains properties with creating contains date and time. This sort is based on created date.

var employees = [
    { id: 18, name: 'Johh', created: '2020-08-1 07:12:10.0' },
    { id: 21, name: 'Frank', created: '2019-08-1 07:12:10.0', },
    { id: 1, name: 'Eric', created: '2018-08-1 07:12:10.0', }
];
_.sortBy(employees,['created']);

And the output is

0: Object {created: "2018-08-1 07:12:10.0", id: 1, name: "Eric"}
1: Object {created: "2019-08-1 07:12:10.0", id: 21, name: "Frank"}
2: Object {created: "2020-08-1 07:12:10.0", id: 18, name: "Johh"}

Conclusion

In short, In this blog post, You learned multiple ways to sort an object array using

• Compare object fields with keys
• Lodash sorts array of objects with multiple properties
• Underscores sorting with object date values