Arranging Typescript strings in sequential date format

Question

Arranging Typescript strings in sequential date format

Looking for guidance on how to sort string dates in chronological order, any expert tips?

Let's say we have an array object like:


data = [
    {id: "1", date: "18.08.2018"}
    {id: "2", date: "05.01.2014"}
    {id: "3", date: "01.01.2014"}
    {id: "4", date: "20.05.2016"}
]

The desired outcome is: when the button is clicked, data should be returned in chronological order like:


data = [
    {id: "3", date: "01.01.2014"}
    {id: "2", date: "05.01.2014"}
    {id: "4", date: "20.05.2016"}
    {id: "1", date: "18.08.2018"}
]

I attempted sorting based on dates and months but not accounting for the year with this code:


data.sort(function(a,b){return b.date - a.date});

javascript typescript

Answer 1

Answer №1

To organize each item, you can convert them into dates and compare:

let items = [{
    id: "1",
    date: "18.08.2018"
  },
  {
    id: "2",
    date: "05.01.2014"
  },
  {
    id: "3",
    date: "01.01.2014"
  },
  {
    id: "4",
    date: "20.05.2016"
  },
]
//ascending
console.log(items.sort((a, b) => {
  var d1 = a.date.split('.'),
    d2 = b.date.split('.');
  return new Date(d1[2], d1[1] - 1, d1[0]) - new Date(d2[2], d2[1] - 1, d2[0]);
}));

//descending
console.log(items.sort((a, b) => {
  var d1 = a.date.split('.'),
    d2 = b.date.split('.');
  return new Date(d2[2], d2[1] - 1, d2[0]) - new Date(d1[2], d1[1] - 1, d1[0]);
}));

Answer 2

To organize each item, you can convert them into dates and compare:

let items = [{
    id: "1",
    date: "18.08.2018"
  },
  {
    id: "2",
    date: "05.01.2014"
  },
  {
    id: "3",
    date: "01.01.2014"
  },
  {
    id: "4",
    date: "20.05.2016"
  },
]
//ascending
console.log(items.sort((a, b) => {
  var d1 = a.date.split('.'),
    d2 = b.date.split('.');
  return new Date(d1[2], d1[1] - 1, d1[0]) - new Date(d2[2], d2[1] - 1, d2[0]);
}));

//descending
console.log(items.sort((a, b) => {
  var d1 = a.date.split('.'),
    d2 = b.date.split('.');
  return new Date(d2[2], d2[1] - 1, d2[0]) - new Date(d1[2], d1[1] - 1, d1[0]);
}));

Answer 3

Answer №2

When comparing strings using basic comparison

It involves comparing each character based on their ASCII values

Sorting data by date in descending order

This doesn't work because

b.date-a.date

Subtracting day, month, and year in a string format

For example, "30-10-2010" - "19-10-2019" results in a value greater than 0

'3'-'1' is greater than 0 so it returns 1

Similarly, "30-10-2010" - "31-10-2019" results in a value smaller than 0

'3'-'3' =0 so it compares '0' to '1' which results in -1
a.date b.date are treated as strings and using '-' might fail sometimes due to NaN issues

Casting string to ASCII may lead to NaN errors

let data = [{
    id: "1",
    date: "18.08.2018"
  },
  {
    id: "2",
    date: "05.01.2014"
  },
  {
    id: "3",
    date: "01.01.2014"
  },
  {
    id: "4",
    date: "20.05.2016"
  },
]
var Rs=data.sort((a, b) => {
  var d1 = a.date.split('.');
  var d2 = b.date.split('.');
  return (d1[2]+d1[1]+d1[0]).localeCompare(d2[2]+d2[1]+d2[0]);
});
//Using basic string compare
//compare per char under ascii
var S1="Apple";
var S2="Apzle";
var S3="Apzle";
var S4="Apzle ";
console.log(S1.localeCompare(S2));
console.log(S2.localeCompare(S1));
console.log(S3.localeCompare(S3));
console.log(S3.localeCompare(S4));

console.log(Rs);

Answer 4

When comparing strings using basic comparison

It involves comparing each character based on their ASCII values

Sorting data by date in descending order

This doesn't work because

b.date-a.date

Subtracting day, month, and year in a string format

For example, "30-10-2010" - "19-10-2019" results in a value greater than 0

'3'-'1' is greater than 0 so it returns 1

Similarly, "30-10-2010" - "31-10-2019" results in a value smaller than 0

'3'-'3' =0 so it compares '0' to '1' which results in -1
a.date b.date are treated as strings and using '-' might fail sometimes due to NaN issues

Casting string to ASCII may lead to NaN errors

let data = [{
    id: "1",
    date: "18.08.2018"
  },
  {
    id: "2",
    date: "05.01.2014"
  },
  {
    id: "3",
    date: "01.01.2014"
  },
  {
    id: "4",
    date: "20.05.2016"
  },
]
var Rs=data.sort((a, b) => {
  var d1 = a.date.split('.');
  var d2 = b.date.split('.');
  return (d1[2]+d1[1]+d1[0]).localeCompare(d2[2]+d2[1]+d2[0]);
});
//Using basic string compare
//compare per char under ascii
var S1="Apple";
var S2="Apzle";
var S3="Apzle";
var S4="Apzle ";
console.log(S1.localeCompare(S2));
console.log(S2.localeCompare(S1));
console.log(S3.localeCompare(S3));
console.log(S3.localeCompare(S4));

console.log(Rs);

Arranging Typescript strings in sequential date format

Answer №1

Answer №2

Similar questions

Incorporating a component specified in a .jsx file into a TypeScript file

Establish map boundaries using the longitude and latitude of multiple markers

How can I correct the error in accessing state data with a getter and displaying the outcome in a component?

Tips for sending an icon as a prop in React components

Unveiling the Evasive Final Element in a JavaScript Array

Response from the server to multiple asynchronous XMLHttpRequests

I am encountering issues with running my tests using react-testing-library alongside TypeScript

Setting the y-axis range in d3.js and nvd3.js: A complete guide

Script on the server side fails to execute following validation of form

Presenting a 24-column data table fetched from MySQL and integrated into a webpage through JavaScript DataTables

The step-by-step guide to testing an Angular promise using Jasmine

The JSON page does not display the image

Transforming Javascript code using regular expressions into C#

Display a complex JSON string in an ng-grid

Struggled to incorporate Typescript function overload's implementation

What is the method for obtaining the return type based on the type of a generic function?

angular2 and ionic2 encounter issues when handling requests with observable and promises

Running the gulp uncss command with regex to ignore specific elements is not functioning as expected

Deploy Node.js on a Debian server hosted on Google Compute Engine

Issues arise when implementing Django templates in conjunction with jQuery