Reorganizing an array of JSON data by date value with a limitation to just one

Question

Reorganizing an array of JSON data by date value with a limitation to just one

Currently, I am attempting to organize a JSON array based on the date key. However, it appears that my sorting function is either stopping after one sort or simply not functioning correctly.

Here is the JavaScript code for my sorting function:

  function sortByDate() {
        result = gloresult
        var newA = result.sort(function(a,b){
          return Number(new Date(a.Date)) - Number(new Date(b.Date));
        });

       console.log(newA)


      }

Input Json content

gloresult = [
    {
        "Heading": "A",
        "Topic A": "Ball Valve",
        "Date": "2/05/2019"
    },
    {
        "Heading": "B",
        "Topic A": "ABS",
        "Date": "1/05/2019"
    },
    //more data...
]

Output Json content

[
    {
        "Heading": "B",
        "Topic A": "ABS",
        "Date": "1/05/2019"

    },
    {
        "Heading": "A",
        "Topic A": "Ball Valve",
        "Date": "2/05/2019"

    },
    //more sorted data...
]

Upon examination, I noticed that only items A and B have switched positions while the rest of the results remain unchanged. I suspect this could be due to the way I am calling the function when a user selects a button on an HTML page.

javascript arrays json date object

Answer 1

Answer №1

The reason for the issue is that the dates are formatted as DD/MM/YYYY, while the Date constructor expects the format to be MM/DD/YYYY. As a result, when a new date in DD/MM/YYYY format is passed, it will return NaN if invalid. To resolve this, you can make a slight adjustment to your code inside the function:

const gloresult = [{"Heading":"A","Topic A":"Ball Valve","Date":"2/05/2019"},{"Heading":"B","Topic A":"ABS","Date":"1/05/2019"},{"Heading":"C","Topic A":"Acrylic","Date":"21/05/2019"},{"Heading":"D","Topic A":"Adaptor Fitting","Date":"21/05/2019"},{"Heading":"E","Topic A":"Air Gap","Date":"4/05/2019"},{"Heading":"F","Topic A":"Stuff","Date":"21/03/2019"},{"Heading":"G","Topic A":"Stuff","Date":"21/04/2019"},{"Heading":"H","Topic A":"Stuff","Date":"21/05/2021"}];

const sortByDate = () => {
  let result = gloresult;
  let newA = result.sort(({ Date: a }, { Date: b }) => {
    let [da, ma, ya] = a.split("/");
    let [db, mb, yb] = b.split("/");
    return Number(new Date([ma, da, ya].join("/"))) - Number(new Date([mb, db, yb].join("/")));
  });
  console.log(newA);
}

sortByDate();

.as-console-wrapper { max-height: 100% !important; top: auto; }

Answer 2

The reason for the issue is that the dates are formatted as DD/MM/YYYY, while the Date constructor expects the format to be MM/DD/YYYY. As a result, when a new date in DD/MM/YYYY format is passed, it will return NaN if invalid. To resolve this, you can make a slight adjustment to your code inside the function:

const gloresult = [{"Heading":"A","Topic A":"Ball Valve","Date":"2/05/2019"},{"Heading":"B","Topic A":"ABS","Date":"1/05/2019"},{"Heading":"C","Topic A":"Acrylic","Date":"21/05/2019"},{"Heading":"D","Topic A":"Adaptor Fitting","Date":"21/05/2019"},{"Heading":"E","Topic A":"Air Gap","Date":"4/05/2019"},{"Heading":"F","Topic A":"Stuff","Date":"21/03/2019"},{"Heading":"G","Topic A":"Stuff","Date":"21/04/2019"},{"Heading":"H","Topic A":"Stuff","Date":"21/05/2021"}];

const sortByDate = () => {
  let result = gloresult;
  let newA = result.sort(({ Date: a }, { Date: b }) => {
    let [da, ma, ya] = a.split("/");
    let [db, mb, yb] = b.split("/");
    return Number(new Date([ma, da, ya].join("/"))) - Number(new Date([mb, db, yb].join("/")));
  });
  console.log(newA);
}

sortByDate();

.as-console-wrapper { max-height: 100% !important; top: auto; }

Answer 3

Answer №2

Although it presented a bit of challenge, I finally got it to work!

var
  gloresult = [ { "Heading": "A", "Topic A": "Ball Valve",      "Date": "2/05/2019"   }
              , { "Heading": "B", "Topic A": "ABS",             "Date": "1/05/2019"   }
              , { "Heading": "C", "Topic A": "Acrylic",         "Date": "21/05/2019"  }
              , { "Heading": "D", "Topic A": "Adaptor Fitting", "Date": "21/05/2019"  }
              , { "Heading": "E", "Topic A": "Air Gap",         "Date": "4/05/2019"   }
              , { "Heading": "F", "Topic A": "Stuff",           "Date": "21/03/2019"  }
              , { "Heading": "G", "Topic A": "Stuff",           "Date": "21/04/2019"  }
              , { "Heading": "H", "Topic A": "Stuff",           "Date": "21/05/2021"  }
              ];

gloresult.sort((a, b)=>{
  let
    aa = a.Date.split('/').reverse().map(d=>('0000'+d).slice(-4)).join('-'),
    bb = b.Date.split('/').reverse().map(d=>('0000'+d).slice(-4)).join('-');
  return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

// for (let x of gloresult ) console.log ( x.Date );
for (let x of gloresult ) console.log ( JSON.stringify( x ) );

.as-console-wrapper { max-height: 100% !important; top: auto; }

Answer 4

Although it presented a bit of challenge, I finally got it to work!

var
  gloresult = [ { "Heading": "A", "Topic A": "Ball Valve",      "Date": "2/05/2019"   }
              , { "Heading": "B", "Topic A": "ABS",             "Date": "1/05/2019"   }
              , { "Heading": "C", "Topic A": "Acrylic",         "Date": "21/05/2019"  }
              , { "Heading": "D", "Topic A": "Adaptor Fitting", "Date": "21/05/2019"  }
              , { "Heading": "E", "Topic A": "Air Gap",         "Date": "4/05/2019"   }
              , { "Heading": "F", "Topic A": "Stuff",           "Date": "21/03/2019"  }
              , { "Heading": "G", "Topic A": "Stuff",           "Date": "21/04/2019"  }
              , { "Heading": "H", "Topic A": "Stuff",           "Date": "21/05/2021"  }
              ];

gloresult.sort((a, b)=>{
  let
    aa = a.Date.split('/').reverse().map(d=>('0000'+d).slice(-4)).join('-'),
    bb = b.Date.split('/').reverse().map(d=>('0000'+d).slice(-4)).join('-');
  return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

// for (let x of gloresult ) console.log ( x.Date );
for (let x of gloresult ) console.log ( JSON.stringify( x ) );

.as-console-wrapper { max-height: 100% !important; top: auto; }

Reorganizing an array of JSON data by date value with a limitation to just one

Answer №1

Answer №2

Similar questions

Building a versatile and interactive table using AngularJS with data sourced from a

Try out the Jquery Chosen plugin, which allows you to select multiple instances of the same

I have noticed that there are 3 images following the same logical sequence, however only the first 2 images seem to be functioning correctly. Can you help

Could not locate module: The package path ./react is not exported from the package in E:NextAppportfolio_website-mainportfolio_website-main ode_modules ext-auth

Accessing feedback from Reddit's API

Creating template variable based on $state in AngularJS

Developing instance members and methods in JavaScript

What is the best way to extract data using Angular from the backend and then transfer it to the frontend using Node.js?

Fixing the hydration error in Next 13 can be challenging, especially when it occurs outside of a Suspense boundary

Guide to exporting everything within a div as a PDF using Angular 2

The Material-UI Button isn't able to trigger when the Popover is closed

Assigning batch variables based on the data within the variables

iOS alert notification for navigator

Trouble with displaying an array of React elements in the render() function

What is the most effective method for displaying error messages in Extjs?

Guide on displaying ajax data using PHP

What is the process for constructing an object to resemble another object?

Unveiling the secrets to integrating real-time graphical representations of sensor

Adapt appearance according to the length of the text

Prevent a div from being displaced by the transform property once it reaches the window's border