Typescript sorting list by status (string value)

I need to sort list of items by its status and I am not sure which approach I should go, is it creating comparer or some kind of sorting technique ?
Would lodash work here ?

example input list:

[
{id: 1, name: "name1", status: "Failed"},
{id: 2, name: "name2", status: "Success"},
{id: 3, name: "name3", status: "In progress"},
{id: 4, name: "name4", status: "Reserved"},
{id: 5, name: "name5", status: "Pending"}
]

example sorted list (output) sorted in Failed -> In progress -> Reserved -> Pending -> Success

[
{id: 1, name: "name1", status: "Failed"},
{id: 3, name: "name3", status: "In progress"},
{id: 4, name: "name4", status: "Reserved"},
{id: 5, name: "name5", status: "Pending"}
{id: 2, name: "name2", status: "Success"},
]

stack I am using is Angular + Typescript.

Edit: List is kinda big, about ~15k rows usually.

You can sort your array based on values in other array:

let sortOrder = ['Failed', 'In progress', 'Reserved', 'Pending', 'Success'];
let array = [
    { id: 1, name: "name1", status: "Failed" },
    { id: 2, name: "name2", status: "Success" },
    { id: 3, name: "name3", status: "In progress" },
    { id: 4, name: "name4", status: "Reserved" },
    { id: 5, name: "name5", status: "Pending" }
];

array.sort((a, b) => {
    return sortOrder.indexOf(a.status) - sortOrder.indexOf(b.status);
});

console.log(array);

You can sort using sort() as below to sort the array using status.

const data = [
  { id: 1, name: "name1", status: "Failed" },
  { id: 2, name: "name2", status: "Success" },
  { id: 3, name: "name3", status: "In progress" },
  { id: 4, name: "name4", status: "Reserved" },
  { id: 5, name: "name5", status: "Pending" }
]

function sortBy(data: any): any {
  const order = ['Failed', 'In progress', 'Reserved', 'Pending', 'Success']
  var ordering: any = {};
  for (var i = 0; i < order.length; i++)
    ordering[order[i]] = i;
  var result = data.sort(function(a: any, b: any) {
    return (ordering[a.status] - ordering[b.status]) || a.status.localeCompare(b.status);
  });
  return result;
}

console.log(sortBy(data));

Checkout the example https://repl.it/repls/KnowingRareNlp

To sort the data in custom order, you can group the items first and then based on your sort order, add them to the final output.

Try like this:

  constructor() {
    var groupedData = this.groupBy(this.data, "status");
    var sortArrangement = ["Failed", "In progress", "Reserved", "Pending", "Success"]
    sortArrangement.forEach(item => {
      groupedData[item].forEach(x => {
        this.result.push(x)
      })
    })
    console.log(this.result)
  }

  groupBy(xs, key) {
    return xs.reduce(function(rv, x) {
      (rv[x[key]] = rv[x[key]] || []).push(x);
      return rv;
    }, {});
  }

Working Demo

Note: You can move this logic to a pipe as well.

To sort by an arbitrary value, create a Map or an object that gives numeric weight to each status, and then use Array.sort() or lodash's _.orderBy(), and get the weight from the map according to the status:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr = [{"id":1,"name":"name1","status":"Failed"},{"id":2,"name":"name2","status":"Success"},{"id":3,"name":"name3","status":"In progress"},{"id":4,"name":"name4","status":"Reserved"},{"id":5,"name":"name5","status":"Pending"}]

const order = new Map([['Failed', 0], ['In progress', 1], ['Reserved', 2], ['Pending', 3], ['Success', 4]])

const result = _.orderBy(arr, o => order.get(o.status))

console.log(result)

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

<!-- end snippet -->