Typescript Array Sort example | javascript

Typescript Array Sort example | javascript

In this blog post, We are going to learn how to Sort Array in javascript or typescript.

We are going to learn to Sort in typescript

  • How to sort an array of strings in typescript?
  • How to sort an array of objects in javascript?

The typescript Array class provides a sort method to sort elements.

Javascript Array Sort method

The Array class provides the method sort to the array elements in ascending or descending order.

Elements can be simple strings, Object which contain keys and values, or Typescript classes.

Syntax:

Array.sort(ComparatorFunction);

Parameters are ComparatorFunction is a callback function that specifies the order of the elements, If not passed, the default sorting is applied.

How to Sort Array of String in typescript Example

Array Declared and initialized with new Array() and initialized with strings separated in a comma. The Array.sort() method is used without a comparator function.

Here is an example

var arrayStrings = new Array("one", "two", "there", "four");
var sortedArray = arrayStrings.sort();
console.log("" + sortedArray);

Output:

four,one,there,two

How to sort Array of Interfaces in Typescript

The object can be directly created using data created with array syntax or you can create a use Interface.

This Emp object contains id and names. This example sorts the objects by name property.

First created Emp interface.

interface Emp {
  id: number;
  name: string;
}

Next, Create an Array of Objects and initialize it with values

var emps: Emp[] = [
  { id: "5", name: "Kiran" },
  { id: "1", name: "Frank" },
  { id: "2", name: "Tom" },
  { id: "51", name: "Abc" },
];

Write a Compare Function for the Name of the Emp object

var compareName = function (emp1: Emp, emp2: Emp) {
  if (emp1.name > emp2.name) {
    return -1;
  }
  if (emp1.name < emp2.name) {
    return 1;
  }
  return 0;
};

Finally Call Array.sort() with compare function

var sortedArray = emps.sort(compareName);
console.log(sortedArray);

Output is

0: {id: "2", name: "Tom"}
1: {id: "5", name: "Kiran"}
2: {id: "1", name: "Frank"}
3: {id: "51", name: "Abc"}

How to Sort Array Object Data by Date property Typescript Example

The object contains the key date property.

We can sort the object data based on date in ascending or descending.

Need to supply comparator custom code which handles Date comparisons.

The first Date string is converted to an Inbuilt Date object.

Date ascending This is an example of sorting an array of objects date by date ascending.

interface Emp {
  id: number;
  name: string;
  date: Date;
}
var emps: Emp[] = [
  { id: "5", name: "Kiran", date: "2018-05-05" },
  { id: "1", name: "Frank", date: "2017-05-05" },
  { id: "2", name: "Tom", date: "2016-05-05" },
  { id: "51", name: "Abc", date: "2018-10-05" },
];

var compareDate = function (emp1: Emp, emp2: Emp) {
  var emp1Date = new Date(emp1.date).getTime();
  var emp2Date = new Date(emp2.date).getTime();
  return emp1Date > emp2Date ? 1 : -1;
};
var sortedArray = emps.sort(compareDate);
console.log(sortedArray);

Output:

0: {id: "2", name: "Tom", date: "2016-05-05"}
1: {id: "1", name: "Frank", date: "2017-05-05"}
2: {id: "5", name: "Kiran", date: "2018-05-05"}
3: {id: "51", name: "Abc", date: "2018-10-05"}

We will see the Sort Date by descending. Object property date descending

var compareDate = function (emp1: Emp, emp2: Emp) {
  var emp1Date = new Date(emp1.date).getTime();
  var emp2Date = new Date(emp2.date).getTime();
  return emp1Date > emp2Date ? -1 : 1;
};

Output:

0: {id: "51", name: "Abc", date: "2018-10-05"}
1: {id: "5", name: "Kiran", date: "2018-05-05"}
2: {id: "1", name: "Frank", date: "2017-05-05"}
3: {id: "2", name: "Tom", date: "2016-05-05"}

UnderscoreJs TypescriptArray Sort Example

UnderscoreJS is a javascript library that provides a lot of utility functions.

It provides a sortBy function which accepts an array and a function as an argument. This library can be used in javascript or typescript applications using an npm package manager. This can be installed using the npm command.

Here is an example of array string sorting in descending

var sortedArray = _.sortBy(["four", "one", "zero"], function (value) {
  return value.toLowerCase();
});
console.log(sortedArray);

output:

["four", "one", "zero"];

Conclusion

To Sum Up, You learned the array declaration and initialization syntax of the sort method and how to sort an array of strings, objects, and interfaces with date key sorting in ascending or descending order.

Sort method sorts the original array, if you want the original array not to sort, Please copy the array before doing a sort