sort-by-typescript

• sort-by-typescript
  • Install
    • npm
    • yarn
  • Usage
    • Importing
    • Examples
  • sortBy(prop)
  • sortBy(prop, prop)
  • sortBy(prop.prop)
  • sortBy - case insensitive
  • sortBy - passing in a function to modify values before sorting
  • sortBy() - no property
  • sortBy() - no property - descending

Install

You can install via npm or yarn.

npm

npm install --save sort-by-typescript

yarn

yarn add sort-by-typescript

Usage

Importing

You can import using ES6 imports. If you are using typescript this package includes a typings file.

import { sortBy } from 'sort-by-typescript';

Examples

In all examples this array of customers will be used.

const customers = [
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[email protected]',
    },
  },
];

sortBy(prop)

To sort by name in ascending order:

customers.sort(sortBy('name'));

/* Result
[
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[email protected]',
    },
  },
]
*/

To sort by age in descending order:

customers.sort(sortBy('-age'));

/* Result
[
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[email protected]',
    },
  },
]
*/

sortBy(prop, prop)

To sort by name then age ascending order:

customers.sort(sortBy('name', 'age'));

/* Result
[
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[email protected]',
    },
  },
  
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[email protected]',
    },
  },  
]
*/

To sort by name descending order then age ascending order:

customers.sort(sortBy('-name', 'age'));

/* Result
[
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[email protected]',
    },
  },  
]
*/

sortBy(prop.prop)

To sort by nested prop: (Note: uppercase letters will be sorted before lowercase letters)

customers.sort(sortBy('contactDetails.email'));

/* Result
[
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[email protected]',
    },
  },
]
*/

sortBy - case insensitive

As we saw above, sorting the email addresses did not necessarily return the result we expected, because uppercase letters are sorted before lowecase letters. To combat this we can add a ^ to the end of our prop.

customers.sort(sortBy('contactDetails.email^'));

/* Result
[
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[email protected]',
    },
  },
]
*/

sortBy - passing in a function to modify values before sorting

You can also pass in functions to modify our sort values before sorting. In this example we pass in our own function to do a case insensitive sort;

customers.sort(
  sortBy('contactDetails.email', (_key, value) => {
    if (typeof value === 'string') {
      return value.toLowerCase();
    } else {
      return value;
    }
  })
);

/* Result
[
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[email protected]',
    },
  },
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[email protected]',
    },
  },
]
*/

sortBy() - no property

You can also sort an array of strings case insensitively by providing no properties to the sortBy function

const strings: string[] = ['Orange', 'duck', 'Car', 'angle'];

strings.sort(sortBy());

/* Result
    ['angle', 'Car', 'duck', 'Orange']
*/

sortBy() - no property - descending

You can also sort an array of strings case insensitively in reverse order by providing just the - modifier to the sortBy function

const strings: string[] = ['Orange', 'duck', 'Car', 'angle'];

strings.sort(sortBy('-'));

/* Result
    ['Orange', 'duck', 'Car', 'angle']
*/