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 )
}
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}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}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.Map#values, get the three listsArray#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);