In This tutorial, You will learn how to sort object array with key or property in typescript.

Object holds key and value of an an real entity. Object Array is an list of objects.

Array object soring with comparison logic

following is an example of Sorting array of objects on ascending order with 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 is

[ { 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 utilities functions. sortBy is one of the method for sorting an array.

First, install syntax

sortBy(array or objects,[iteratekeys])

Input is array or objects iterate keys enables to sort

Return is sorted array

Following is an example for sort object with key values of an object array in ascending order.

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

import * as _ from 'underscore';

var animals = [
      { 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 accepts iterate keys, please give multiple keys

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

First properties is considered, if there are same value for first property, then sort this same values on 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 object array

Like lodash library,underscoreJS provides many utility functions for npm applications. sortBy function in underscore provides sorting an array object with multiple attributes The syntax and usage is same as Lodash sortBy

In the following example,An object contain properties with create contains date and time This sorts 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

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

• Compare object fields with keys
• Lodash sort array objects with multiple properties
• Underscorejs sorting with object date values