Sort list of items by specific status-CodePudding

I'd like to sort a list of task by status, for example, tasks with status "active" should be grouped follow by tasks with completed, and then tasks with other status should be displayed in the order they were added:

it should display something like this:

 const taskToShows = [
    {task: "task7", status: "active"},
    {task: "task6", status: "active"},
    {task: "task5", status: "active"},
    {task: "task8", status: "completed"},
    {task: "task4", status: "completed"},
    {task: "task1", status: "pending"},
    {task: "task2", status: "other status"},
    {task: "task3", status: "progress"},
   ]

My Approach was using sort() I can ordered at first but then it ordered all the tasks, and just need the actives and the completed ones at the top and All other tasks in the order added by the user

if(this.status === 'active' || this.status === 'completed'){  
      this.tasksToShow = this.tasksList.sort((a, b) => (a.status.toLowerCase() > 
      b.status.toLowerCase()) ? 1 : (a.status.toLowerCase()  === b.status.toLowerCase() ) 
      ? ((a.status > b.status) ? 0 : -1) : -1 )
     }

CodePudding user response：

Try this-

 const taskToShows = [
    {task: "task7", status: "active"},
    {task: "task6", status: "active"},
    {task: "task5", status: "active"},
    {task: "task8", status: "completed"},
    {task: "task4", status: "completed"},
    {task: "task1", status: "pending"},
    {task: "task2", status: "other status"},
    {task: "task3", status: "progress"},
];



taskToShows.sort((a, b) => {
  const arr = ['active', 'completed'];
  return arr.includes(a.status) || arr.includes(b.status) ? 1 : -1;
});

console.log(taskToShows);

.as-console-wrapper{min-height: 100%!important; top: 0}

CodePudding user response：

Using Array#reduce, iterate over the array while updating a Map whose initial values are three empty lists: active, completed, and other. In each iteration, get the corresponding list from the current status, other as the fallback, and push the current element to it.
Using Map#values, get the three lists
Using Array#flat, return a unified list where active shows first, then completed, then, other.

const taskToShows = [ {task: "task2", status: "other status"}, {task: "task7", status: "active"}, {task: "task5", status: "active"}, {task: "task8", status: "completed"}, {task: "task1", status: "pending"}, {task: "task3", status: "progress"}, {task: "task4", status: "completed"}, {task: "task6", status: "active"} ];

const res = [...
  taskToShows.reduce((lists, e) => {
    const list = lists.get(e.status) ?? lists.get('other');
    list.push(e);
    return lists;
  }, new Map([ ['active', []], ['completed', []], ['other', []] ]))
  .values()
].flat();

console.log(res);

CodePudding user response：

Of couse you сan use sort():

const taskToShows = [{task: "task7", status: "completed"},{task: "task6", status: "active"},{task: "task5", status: "active"},{task: "task8", status: "completed"},{task: "task4", status: "completed"},{task: "task1", status: "pending"},{task: "task2", status: "other status"},{task: "task3", status: "progress"},{task: "task33", status: "active"},{task: "task77", status: "completed"}];

const statusOrder = {active: 0, completed: 1};

const result = taskToShows.sort(
  ({status: s1}, {status: s2}) => (statusOrder[s1] ?? Infinity) - (statusOrder[s2] ?? Infinity)
);

console.log(taskToShows);

.as-console-wrapper{min-height: 100%!important; top: 0}