Applying these sorting functions to my specific scenario

Question

Applying these sorting functions to my specific scenario

Hello everyone, I hope you can help me out with this issue. I have been struggling for hours trying to sort my array of objects in JavaScript based on a specific property, but I just can't seem to get it right.

I have referred to some of the top posts on Stack Overflow and tried a few different solutions, but none of them have worked for me. I want to sort my array of objects by the "horaInicial" property, which contains an ISO 8601 string.

Array(3)
0: Appointment
area: "S. Eter"
data: "2019-05-23T12:40:55.155+01:00"
description: "Sprint CS WEB"
horaFinal: "2019-05-21T11:40:59.028Z"
horaInicial: "2019-05-21T11:40:59.028Z"
id: 17
__proto__: Object
1: Appointment
area: "S. Confiança"
data: "2019-05-23T12:40:55.155+01:00"
description: "AR"
horaFinal: "2019-05-21T16:45:15.448+01:00"
horaInicial: "2019-05-21T16:00:15.448+01:00"
id: 18
__proto__: Object
2: Appointment
area: "djdndjsnsnsnzznj"
data: "2019-05-23T11:18:24.596+01:00"
description: "xbxnxnsnsjsjdjdkssjdjsjsk"
horaFinal: "2019-05-22T10:42:46.770Z"
horaInicial: "2019-05-22T11:41:46.769+01:00"
id: 23
__proto__: Object

Despite trying different sorting functions like the one below, the array remains unchanged:

    this.appointments.sort(function(a, b) {
        var textA = a.horaInicial.toUpperCase();
        var textB = b.horaInicial.toUpperCase();
        return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
     });

    console.log(this.appointments);

I am clearly missing something here. Can anyone point me in the right direction?

javascript string typescript sorting object

Answer 1

Answer №1

Make sure to properly parse the Date object in JavaScript to ensure accurate comparisons. Otherwise, you'll be comparing strings instead of actual dates.

If you want to use the sort() function in JavaScript and get the desired sorting output based on the horaInicial property, you should parse the dates within the sorting function. Here's how you can achieve that:

yourArray.sort(function(a,b){
  return new Date(b.horaInicial) - new Date(a.horaInicial);
});

By doing this, you'll get a descending array sorted by date. If you want to convert it to ascending order, you can simply use yourArray.reverse().

Here's an example to illustrate the process:

let yourArray = [
{
  area: "S. Eter",
  data: "2019-05-23T12:40:55.155+01:00",
  description: "Sprint CS WEB",
  horaFinal: "2019-05-21T11:40:59.028Z",
  horaInicial: "2019-05-21T11:40:59.028Z",
  id: 17
},
{
  area: "S. Confiança",
  data: "2019-05-23T12:40:55.155+01:00",
  description: "AR",
  horaFinal: "2019-05-21T16:45:15.448+01:00",
  horaInicial: "2019-05-21T16:00:15.448+01:00",
  id: 18
},
{
  area: "djdndjsnsnsnzznj",
  data: "2019-05-23T11:18:24.596+01:00",
  description: "xbxnxnsnsjsjdjdkssjdjsjsk",
  horaFinal: "2019-05-22T10:42:46.770Z",
  horaInicial: "2019-05-22T11:41:46.769+01:00",
  id: 23
}
];

// BEFORE SORTING THE ARRAY
document.write("Before:<br>");
yourArray.forEach((i)=> {
  document.write(new Date(i.horaInicial) + "<br>");
});

// SORT THE ARRAY
yourArray.sort(function(a,b){
  return new Date(b.horaInicial) - new Date(a.horaInicial);
});

// AFTER SORTING THE ARRAY
document.write("<br>After desc:<br>");
yourArray.forEach((i)=> {
  document.write(new Date(i.horaInicial) + "<br>");
});

// REVERSING ARRAY
yourArray.reverse();

// AFTER SORTING AND REVERSING ARRAY
document.write("<br>After asc:<br>");
yourArray.forEach((i)=> {
  document.write(new Date(i.horaInicial) + "<br>");
});

Answer 2

Make sure to properly parse the Date object in JavaScript to ensure accurate comparisons. Otherwise, you'll be comparing strings instead of actual dates.

If you want to use the sort() function in JavaScript and get the desired sorting output based on the horaInicial property, you should parse the dates within the sorting function. Here's how you can achieve that:

yourArray.sort(function(a,b){
  return new Date(b.horaInicial) - new Date(a.horaInicial);
});

By doing this, you'll get a descending array sorted by date. If you want to convert it to ascending order, you can simply use yourArray.reverse().

Here's an example to illustrate the process:

let yourArray = [
{
  area: "S. Eter",
  data: "2019-05-23T12:40:55.155+01:00",
  description: "Sprint CS WEB",
  horaFinal: "2019-05-21T11:40:59.028Z",
  horaInicial: "2019-05-21T11:40:59.028Z",
  id: 17
},
{
  area: "S. Confiança",
  data: "2019-05-23T12:40:55.155+01:00",
  description: "AR",
  horaFinal: "2019-05-21T16:45:15.448+01:00",
  horaInicial: "2019-05-21T16:00:15.448+01:00",
  id: 18
},
{
  area: "djdndjsnsnsnzznj",
  data: "2019-05-23T11:18:24.596+01:00",
  description: "xbxnxnsnsjsjdjdkssjdjsjsk",
  horaFinal: "2019-05-22T10:42:46.770Z",
  horaInicial: "2019-05-22T11:41:46.769+01:00",
  id: 23
}
];

// BEFORE SORTING THE ARRAY
document.write("Before:<br>");
yourArray.forEach((i)=> {
  document.write(new Date(i.horaInicial) + "<br>");
});

// SORT THE ARRAY
yourArray.sort(function(a,b){
  return new Date(b.horaInicial) - new Date(a.horaInicial);
});

// AFTER SORTING THE ARRAY
document.write("<br>After desc:<br>");
yourArray.forEach((i)=> {
  document.write(new Date(i.horaInicial) + "<br>");
});

// REVERSING ARRAY
yourArray.reverse();

// AFTER SORTING AND REVERSING ARRAY
document.write("<br>After asc:<br>");
yourArray.forEach((i)=> {
  document.write(new Date(i.horaInicial) + "<br>");
});

Answer 3

Answer №2

Why is it beneficial to convert timestamps into epoch format before sorting them? By converting timestamps into epoch, you can easily sort them using the resulting numbers.

1. To convert timestamps into epoch format, you can do the following -

 arr2 = arr.map(item => {
    item.horaInicialEpoch = new Date(item.horaInicial).getTime();
    return item; 
 })

Sort the timestamps based on horaInicialEpoch

arr2.sort((a,b) => a.horaInicialEpoch - b.horaInicialEpoch)

P.S Remember to only use string representations of time when displaying it for humans. For computational purposes, always utilize the seconds since epoch.

Answer 4

Why is it beneficial to convert timestamps into epoch format before sorting them? By converting timestamps into epoch, you can easily sort them using the resulting numbers.

1. To convert timestamps into epoch format, you can do the following -

 arr2 = arr.map(item => {
    item.horaInicialEpoch = new Date(item.horaInicial).getTime();
    return item; 
 })

Sort the timestamps based on horaInicialEpoch

arr2.sort((a,b) => a.horaInicialEpoch - b.horaInicialEpoch)

P.S Remember to only use string representations of time when displaying it for humans. For computational purposes, always utilize the seconds since epoch.

Applying these sorting functions to my specific scenario

Answer №1

Answer №2

Similar questions

fetching data with Contentful and GatsbyJS

The textgeometry element is not appearing in the three.js scene

Express in Node.js is designed in a way that error handling can only be done using the

Learn how to update a form dynamically using the Ajax.BeginForm feature

"Implementing a call and waiting at intervals by utilizing the subscribe function in Angular 6

Having trouble getting Ajax to function properly with CodeIgniter

Tips for including and excluding personalized Chips from input

What is the best way to save inputted names as properties of an object and assign the corresponding input values as the values of those properties?

How can I display only four decimal places by default within textboxes in HTML?

Error with replacing regular expressions in IE11 for the variable $0

Sending an array of objects over socket io: A step-by-step guide

`Angular2 Reactively-shaped Form Elements with BehaviorSubject`

Ensuring a value is fully defined before passing it as a prop in a component

Registering a function for chart.js plugins that manipulates external data

Switching images dynamically using Flask and JavaScript

Customize date filtering in KendoUI grid

The text "Hello ${name}" does not get substituted with the name parameter right away in the message string

Step-by-step guide to creating a custom wrapper in React that modifies the props for a component

Exploring File Read and Write Functionality in Angular 4

Using Jquery to activate a vertical scrolling bar