sort-by-typescript

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: '[e-mail]',
    },
  },
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[e-mail]',
    },
  },
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[e-mail]',
    },
  },
];

sortBy(prop)

To sort by name in ascending order:

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

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

To sort by age in descending order:

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

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

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: '[e-mail]',
    },
  },
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[e-mail]',
    },
  },
  
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[e-mail]',
    },
  },  
]
*/

To sort by name descending order then age ascending order:

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

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

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: '[e-mail]',
    },
  },
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[e-mail]',
    },
  },
  {
    id: 1,
    name: 'Alex',
    age: 45,
    contactDetails: {
      email: '[e-mail]',
    },
  },
]
*/

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: '[e-mail]',
    },
  },
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[e-mail]',
    },
  },
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[e-mail]',
    },
  },
]
*/

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: '[e-mail]',
    },
  },
  {
    id: 2,
    name: 'Alex',
    age: 20,
    contactDetails: {
      email: '[e-mail]',
    },
  },
  {
    id: 0,
    name: 'Bob',
    age: 33,
    contactDetails: {
      email: '[e-mail]',
    },
  },
]
*/

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']
*/