How to Sort-Object Array by property or key in Typescript?
- Admin
- Sep 20, 2023
- 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. The
sort 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