如何使用javaScript过滤日期？

Question

I'm creating one HTML report which has to show order details as per date selection. The order details stored in JSON file as given below :

[
  {
    "storeName": "ireland",
    "langCode": "en_IE",
    "testCaseName": "Guest User Checkout - Credit Card",
    "orderID": "4001820209",
    "date": "12-02-2019 15:37:30.201",
    "cartTotal": "19.98"
  },
  {
    "storeName": "denmark",
    "langCode": "en_DK",
    "testCaseName": "Guest User Checkout - Credit Card",
    "orderID": "6001825084",
    "date": "12-02-2019 15:37:35.140",
    "cartTotal": "338 DKK"
  },
  {
    "storeName": "united_kingdom",
    "langCode": "en_GB",
    "testCaseName": "Guest User Checkout - Credit Card",
    "orderID": "7002541022",
    "date": "13-02-2019 15:45:08.038",
    "cartTotal": "13.04"
  }
]

The HTML report would be look like this :

I want to take all order dates from this JSON file uniquely. Time needs to be removed and if same date already added into the HTML then skip it. Expected date order on HTML should be :

• 12-02-2019
• 13-02-2019
• 14-02-2019

If user clicks on that particular date then it should display all order placed on that date.

I have written below jQuery/javascript function to read the date and add into html but not sure how to make them unique.

This will call on page load

function myFunction() {
    createList();
    $.getJSON('order-detail.json', function (item) {
        item.forEach(function (data) {
                addItemsInList(data);
        });
    });
}

Create un-ordered list

function createList() {

    var ul = document.createElement('ul');
    ul.setAttribute('id', 'order-dates');

    var div = document.getElementById('orderDateContainer');
    div.appendChild(ul);
}

Append dates in the list

function addItemsInList(data){

    var ul = document.getElementById('order-dates');
    li = document.createElement('li');
    li.setAttribute('class', 'ord-date');
    ul.appendChild(li);
    var a = document.createElement('a');
    a.setAttribute('class', 'record-viewer');
    a.setAttribute('href','#recordContent');
    a.innerHTML=data.date;
    a.setAttribute('onclick','tableCreater()');
    li.appendChild(a);
}

Any help would be great appreciated.

Answer 1

With only slight modifications to your existing functions, you could only loop over the unique dates and add them as before.

1. In myFunction we now reduce the data to only unique strings of dates, stripping away the time. Logic of the reducer is extracted to collectIfUniqueDateFromOrder function.

    function myFunction() { createList(); $.getJSON('order-detail.json', function (data) { const uniqueDateStrings = data.reduce(collectIfUniqueDateFromOrder, []); uniqueDateStrings.forEach(addItemsInList); }); } function collectIfUniqueDateFromOrder (uniqueDates, order) { var dateStringWithoutTime = order.date.split(" ")[0]; if (!uniqueDates.includes(dateStringWithoutTime)) { uniqueDates.push(dateStringWithoutTime); } return uniqueDates; } 

2. In addItemsInList we only handle date strings

    function addItemsInList(dateString) { var ul = document.getElementById('order-dates'); var li = document.createElement('li'); li.setAttribute('class', 'ord-date'); ul.appendChild(li); var a = document.createElement('a'); a.setAttribute('class', 'record-viewer'); a.setAttribute('href', '#recordContent'); a.innerHTML = dateString; // <-- a.setAttribute('onclick', 'tableCreater()'); li.appendChild(a); } 

Answer 2

You can use moment js to parse dates so you can change date format and process things with date object and get a unique list by Set

OR you can just use substring to get your date by dateTimeString.substr(0,10)

 const datetime_dates = [ "12-02-2019 15:37:30.201", "12-02-2019 15:37:30.201", "13-02-2019 15:37:30.201", "13-02-2019 15:37:30.201", "13-02-2019 15:37:30.201", "14-02-2019 15:37:30.201", ]; const get_unique_dates = (dates) => { const dates_only = dates.map(date => moment(date, "DD-MM-YYY HH:mm:ss.SSS").format("DD-MM-YYYY")); const unique_dates = [...new Set(dates_only)]; return unique_dates; } console.log(get_unique_dates(datetime_dates)); // example with your data const orders = [ { "storeName": "ireland", "langCode": "en_IE", "testCaseName": "Guest User Checkout - Credit Card", "orderID": "4001820209", "date": "12-02-2019 15:37:30.201", "cartTotal": "19.98" }, { "storeName": "denmark", "langCode": "en_DK", "testCaseName": "Guest User Checkout - Credit Card", "orderID": "6001825084", "date": "12-02-2019 15:37:35.140", "cartTotal": "338 DKK" }, { "storeName": "united_kingdom", "langCode": "en_GB", "testCaseName": "Guest User Checkout - Credit Card", "orderID": "7002541022", "date": "13-02-2019 15:45:08.038", "cartTotal": "13.04" } ] const order_dates = orders.map(order => order.date); const unique_order_dates = get_unique_dates(order_dates); console.log(unique_order_dates); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> 

For filtering, you better do it in the backend for performance wise by requesting ajax every time user click to your date link