How to create a custom sort order in javascript
Tags: javascript, beginners, tutorial, webdev
Published: 2019-08-09 12:46:57

[image from undraw.co](https://undraw.co/)

[Originally posted on afewminutesofcode.com](https://afewminutesofcode.com/how-to-create-a-custom-sort-order-in-javascript/?utm_source=devto&utm_medium=website&utm_campaign=blogpost)



Usually we will want to sort an array [numerically](https://afewminutesofcode.com/how-to-sort-an-array-numerically-in-javascript/?utm_source=devto&utm_medium=website&utm_campaign=blogpost) or in [alphabetical order](https://afewminutesofcode.com/how-to-sort-an-array-alphabetically-in-javascript/?utm_source=devto&utm_medium=website&utm_campaign=blogpost), but there are also some cases were we might need a custom sort order.

Take the below example we want to show the items **inProgress** first, then **todo** and then **done**.

```js
const tasks = [
  {id:1, title: 'Job A', status: 'done'},
  {id:2, title: 'Job B', status: 'inProgress'},
  {id:3, title: 'Job C', status: 'todo'},
  {id:4, title: 'Job D', status: 'inProgress'},
  {id:5, title: 'Job E', status: 'todo'}
]
```

We will first create an array with our desired sort order.
```js
const sortBy = ['inProgress', 'todo', 'done']
```

Then we will make a function using **reduce** that will output the data as an object. `{inProgress: 0, todo: 1, done: 2}` with the array item as the key and the index as the value.

```js
const sortByObject = data => data.reduce(
  (obj,item,index) => ({
  	...obj,
    [item]:index
}), {}
)
console.log(sortByObject(sortBy))
/* {inProgress: 0, todo: 1, done: 2} */
```
Now we have our sorting setup we can bring it all together with a reusable function that passes in an array (`data`), a `sortby` array, and a `sortField` so we know which field to sort on.

```js
const customSort = ({data, sortBy, sortField}) => {
  const sortByObject = sortBy.reduce(
  (obj, item, index) => ({
      ...obj,
      [item]: index
  }), {})
  return data.sort((a, b) => sortByObject[a[sortField]] - sortByObject[b[sortField]])
}

console.log(customSort({data:tasks, sortBy, sortField: 'status'}))
```

This will now sort by our custom order, however there will be an issue if there is an item in the list that has a different status (one not in our sort order). So to handle this we will set a default sort field to catch all items we don't want in the sort.

```js
const tasksWithDefault = tasks.map(item => ({...item, sortStatus: sortBy.includes(item.status) ? item.status:'other'}))
```

With this in place if we log out our function again this time passing in our updated sort field then we now have our correct sort order with other items at the bottom of the list.

```js
console.log(customSort({
  data:tasksWithDefault,
  sortBy: [...sortBy,'other'],
  sortField: 'sortStatus'
  }))
```

{% codesandbox friendly-fast-4sp4f %}


If you are looking for some more tips or want to be notified when my next post is available follow Me Online Here:

[Instagram](https://instagram.com/afewminutesofcode)
[Facebook](https://facebook.com/afewminutesofcode)
[afewminutesofcode.com](https://afewminutesofcode.com/?utm_source=devto&utm_medium=website&utm_campaign=blogpost)
[Twitter](http://twitter.com/afewminsofcode)
[Pinterest](https://www.pinterest.com.au/afewminutesofcode)