Sorting an object array by date is causing a problem

Question

Sorting an object array by date is causing a problem

UPDATE: Finally cracked the code on this issue. I initially assumed that Date was interpreting the date ("29-04-2020") as DD-MM-YYYY, when it should actually be MM-DD-YYYY.
For instance, here's an object array I'm working with:

let todos: object[] = [
      {
        'id': 1,
        'title': 'Test',
        'description': 'Just a new task',
        'priority': 1,
        'status': 'during',
        'date': new Date('29-05-2020')
      },
      {
        'id': 2,
        'title': 'test23',
        'description': 'Just a new task23',
        'priority': 3,
        'status': 'done',
        'date': new Date('29-05-2020')
      },
      {
        'id': 3,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 2,
        'status': 'in process',
        'date': new Date('29-05-2020')
      },
      {
        'id': 4,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 1,
        'status': 'during',
        'date': new Date('29-05-2020')
      },
      {
        'id': 5,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 2,
        'status': 'done',
        'date': null
      },
      {
        'id': 6,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 1,
        'status': 'in process',
        'date': new Date('29-05-2020')
      },
]

My goal is to sort these objects by date while excluding keys with a null value (hence the use of the if operator). To achieve this, I've created a function:

function sortByDate() {
    todos.sort((a, b) => {
        console.log(a, b)
        if (a['date'] == null) {
            return 1;
        }
        if (b['date'] == null) {
            return -1;
        }
        return a['date'].getTime() - b['date'].getTime()
    })
    return todos
}

However, upon sorting, I noticed that where 'date' property existed but wasn't null, instead of correct date values, I received "Invalid date" entries in the 'date' key. Now, I'm stuck and unsure how to rectify this.

arrays typescript sorting

Answer 1

Answer №1

I discovered a couple of issues in your code:

The object keys are in string format instead of being identifiers. Check out this resource for more information.
The date string is reversed. Make sure to create the date from a string following the guidelines provided in the documentation.

To resolve this, you need to utilize filter to eliminate invalid dates and then proceed with calling the sort method.

If you wish to sort the array by Date in descending order, use the following code snippet:

const todos_filtered_sorted_desc = todos_filtered.sort((a, b) => b.date - a.date);

Alternatively, for ascending order, use the code below:

const todos_filtered_sorted_asc = todos_filtered.sort((a, b) => a.date - b.date);

Here is the revised and corrected code with different dates:

const todos = [
      {
        id: 1,
        title: 'Test',
        description: 'Just a new task',
        priority: 1,
        status: 'during',
        date: new Date('2020-05-29')
      },
      {
        id: 2,
        title: 'test23',
        description: 'Just a new task23',
        priority: 3,
        status: 'done',
        date: new Date('2019-05-29')
      },
      {
        id: 3,
        title: 'test3',
        description: 'Just a new task3',
        priority: 2,
        status: 'in process',
        date: new Date('2021-05-29')
      },
      {
        id: 4,
        title: 'test3',
        description: 'Just a new task3',
        priority: 1,
        status: 'during',
        date: new Date('2008-05-29')
      },
      {
        id: 5,
        title: 'test3',
        description: 'Just a new task3',
        priority: 2,
        status: 'done',
        date: null
      },
      {
        id: 6,
        title: 'test3',
        description: 'Just a new task3',
        priority: 1,
        status: 'in process',
        date: new Date('2000-05-29')
      },
];

console.log(`TODOS[${todos.length}]: ${JSON.stringify(todos)}`);

const todos_filtered = todos.filter(todo => todo !== null && todo !== undefined && todo.date !== null && todo.date !== undefined && todo.date instanceof Date);

console.log(`TODOS FILTERED[${todos_filtered.length}]: ${JSON.stringify(todos_filtered)}`);

const todos_filtered_sorted = todos_filtered.sort((a, b) => b.date - a.date);

console.log(`TODOS FILTERED SORTED[${todos_filtered_sorted.length}]: ${JSON.stringify(todos_filtered_sorted)}`);

You can combine all functions into a single operation like this:

const todos_filtered_sorted = todos
                               .filter(todo => todo !== null && todo !== undefined
                                 && todo.date !== null && todo.date !== undefined
                                 && todo.date instanceof Date)
                               .sort((a, b) => b.date - a.date);

I hope this solution helps! :)

Answer 2

I discovered a couple of issues in your code:

The object keys are in string format instead of being identifiers. Check out this resource for more information.
The date string is reversed. Make sure to create the date from a string following the guidelines provided in the documentation.

To resolve this, you need to utilize filter to eliminate invalid dates and then proceed with calling the sort method.

If you wish to sort the array by Date in descending order, use the following code snippet:

const todos_filtered_sorted_desc = todos_filtered.sort((a, b) => b.date - a.date);

Alternatively, for ascending order, use the code below:

const todos_filtered_sorted_asc = todos_filtered.sort((a, b) => a.date - b.date);

Here is the revised and corrected code with different dates:

const todos = [
      {
        id: 1,
        title: 'Test',
        description: 'Just a new task',
        priority: 1,
        status: 'during',
        date: new Date('2020-05-29')
      },
      {
        id: 2,
        title: 'test23',
        description: 'Just a new task23',
        priority: 3,
        status: 'done',
        date: new Date('2019-05-29')
      },
      {
        id: 3,
        title: 'test3',
        description: 'Just a new task3',
        priority: 2,
        status: 'in process',
        date: new Date('2021-05-29')
      },
      {
        id: 4,
        title: 'test3',
        description: 'Just a new task3',
        priority: 1,
        status: 'during',
        date: new Date('2008-05-29')
      },
      {
        id: 5,
        title: 'test3',
        description: 'Just a new task3',
        priority: 2,
        status: 'done',
        date: null
      },
      {
        id: 6,
        title: 'test3',
        description: 'Just a new task3',
        priority: 1,
        status: 'in process',
        date: new Date('2000-05-29')
      },
];

console.log(`TODOS[${todos.length}]: ${JSON.stringify(todos)}`);

const todos_filtered = todos.filter(todo => todo !== null && todo !== undefined && todo.date !== null && todo.date !== undefined && todo.date instanceof Date);

console.log(`TODOS FILTERED[${todos_filtered.length}]: ${JSON.stringify(todos_filtered)}`);

const todos_filtered_sorted = todos_filtered.sort((a, b) => b.date - a.date);

console.log(`TODOS FILTERED SORTED[${todos_filtered_sorted.length}]: ${JSON.stringify(todos_filtered_sorted)}`);

You can combine all functions into a single operation like this:

const todos_filtered_sorted = todos
                               .filter(todo => todo !== null && todo !== undefined
                                 && todo.date !== null && todo.date !== undefined
                                 && todo.date instanceof Date)
                               .sort((a, b) => b.date - a.date);

I hope this solution helps! :)

Answer 3

Answer №2

Date format should follow yyyy-MM-dd

Check out the code snippet below

const todoList = [
      {
        'id': 1,
        'title': 'Test',
        'description': 'Just a new task',
        'priority': 1,
        'status': 'during',
        'date': new Date('2020-05-29')
      },
      {
        'id': 2,
        'title': 'test23',
        'description': 'Just a new task23',
        'priority': 3,
        'status': 'done',
        'date': new Date('2020-05-29')
      },
      {
        'id': 3,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 2,
        'status': 'in process',
        'date': new Date('2020-05-29')
      },
      {
        'id': 4,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 1,
        'status': 'during',
        'date': new Date('2020-05-29')
      },
      {
        'id': 5,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 2,
        'status': 'done',
        'date': null
      },
      {
        'id': 6,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 1,
        'status': 'in process',
        'date': new Date('2020-04-29')
      },
];

function sortTasksByDate(todos) {
    todos = todos.filter(obj => obj.date !== null).sort((a, b) => {
        if(a.date == b.date) return 0;
        
        if (a.date < b.date)
            return -1;
        if (a.date > b.date)
            return 1;
        return 0;
    });
    console.log(todos);
    return todos
}

Answer 4

Date format should follow yyyy-MM-dd

Check out the code snippet below

const todoList = [
      {
        'id': 1,
        'title': 'Test',
        'description': 'Just a new task',
        'priority': 1,
        'status': 'during',
        'date': new Date('2020-05-29')
      },
      {
        'id': 2,
        'title': 'test23',
        'description': 'Just a new task23',
        'priority': 3,
        'status': 'done',
        'date': new Date('2020-05-29')
      },
      {
        'id': 3,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 2,
        'status': 'in process',
        'date': new Date('2020-05-29')
      },
      {
        'id': 4,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 1,
        'status': 'during',
        'date': new Date('2020-05-29')
      },
      {
        'id': 5,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 2,
        'status': 'done',
        'date': null
      },
      {
        'id': 6,
        'title': 'test3',
        'description': 'Just a new task3',
        'priority': 1,
        'status': 'in process',
        'date': new Date('2020-04-29')
      },
];

function sortTasksByDate(todos) {
    todos = todos.filter(obj => obj.date !== null).sort((a, b) => {
        if(a.date == b.date) return 0;
        
        if (a.date < b.date)
            return -1;
        if (a.date > b.date)
            return 1;
        return 0;
    });
    console.log(todos);
    return todos
}

Sorting an object array by date is causing a problem

Answer №1

Answer №2

Similar questions

Exploring Vue 3: Crafting a custom plugin using the composition API and enhancing it with Typescript type augmentation

Sort by label using the pipe operator in RxJS with Angular

What is the process of extending a class in TypeScript?

Converting a string value into an object in Javascript using a command that functions similarly to eval in Python

The iteration variable concludes with a value that is one higher than anticipated

Struggling with setting up the onChange function in a Next.js application

Transforming a detailed JSON structure into a more simplified format with Angular 2

Creating Swagger documentation for dynamic request and response is a process that involves documenting the various

Step-by-step guide on incorporating an external library into Microsoft's Power BI developer tools and exporting it in PBIVIZ format

There is a JSON issue present, with half of the variables being undefined

Having trouble showing the fa-folders icon in Vuetify?

Navigate array in vue-chart.js

Categories for the Promise.all() function

What is the best way to test the validity of a form while also verifying email availability?

Quickly sorting with just a single recursive invocation

Is it possible in core Node/Express to utilize a JSON file as a RESTful resource?

Encountering a surprise token < while processing JSON with ASP.NET MVC alongside Angular

Creating Dynamic Forms in React with Typescript: A Step-by-Step Guide to Adding Form Elements with an onClick Event Handler

Dramatist - shutting down an angular pop-up dialog

Show content based on dynamically selected dropdown in Angular