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

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

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

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

There are multiple ways we can sort object arrays. first-way using Sort callback Comparator, second-way using lodash sortBy function, Third way use UnderscoreJS sortBy function.

  • ES5
  • ES6/ES2015 way
  • lodash sortBy Function
  • UnderscoreJS sortBy Function
  • Ramda sortBy function

Typescript/Javascript Array provides a sort method that takes function callback.

Syntax sort

sort(function (first, second) {
  return first.property - second.property;
});

the function returns value by subtraction. if the negative number, the first number comes before the second number if the positive number, the Second number comes before the first number zero, both numbers are equal side by side.

ES6 way sorting Array of an object by key property

Let’s sort an array of the object by key property in ascending and descending order

var countries = [
  { id: 1, name: "USA" },
  { id: 21, name: "India" },
  { id: 3, name: "Canada" },
];
// Sorted by ascending id property
let sortedAscendingCountries = countries.sort(function (first, second) {
  return first.id - second.id;
});

console.log(sortedAscendingCountries);

// Sorted by descending id property
let sortedDescendingCountries = countries.sort(function (first, second) {
  return second.id - first.id;
});

console.log(sortedDescendingCountries);

Output:

[
  { id: 1, name: "USA" },
  { id: 3, name: "Canada" },
  { id: 21, name: "India" },
][
  ({ id: 21, name: "India" }, { id: 3, name: "Canada" }, { id: 1, name: "USA" })
];

ES6/ES2015 Array object soring with comparison logic

Let’s declare an array of objects, and each object holds id and name properties.

Following is an example of Sorting an array of objects in ascending order with the id property

The sort method provided a lambda expression that has no name.

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. Thesort by function in the underscore provides sorting of an array of objects with multiple attributes. The syntax and usage are the same as Lodash 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"}

Ramda sort by property in an Array of objects

import R from "ramda";
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" },
];
var employeesInCreatedAscendingOrder = R.sortBy(R.prop("created"), employees);

Conclusion

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

  • Compare object fields with keys using ES5 and ES6 lambda expression
  • Lodash sorts an array of objects with multiple properties
  • Underscores sorting with object date values
  • Rambda sortBy function