代码之家 › 专栏 › 技术社区 › NarendraR TheSociety

如何使用javaScript过滤日期?

date html jquery javascript

NarendraR TheSociety · 技术社区 · 7 年前

我正在创建一个HTML报告,它必须根据日期选择显示订单详细信息。存储在JSON文件中的订单详细信息如下所示:

[
  {
    "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"
  }
]

HTML报告如下所示:

我想从这个JSON文件中唯一地获取所有订单日期。时间需要删除,如果相同的日期已经添加到HTML中,则跳过它。HTML上的预期日期顺序应为:

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

如果用户点击了那个特定的日期,那么它应该显示在那个日期下的所有订单。

我在下面写了jQuery/javascript函数来读取日期并添加到html中,但不确定如何使它们唯一。

这将调用页面加载

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

创建未排序的列表

function createList() {

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

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

在列表中添加日期

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);
}

任何帮助都将不胜感激。

0 回复 | 直到 7 年前

Jaaqo 7 年前

只需对现有函数稍作修改,就只能循环使用唯一的日期,并像以前一样添加它们。

在里面 myFunction 现在,我们将数据简化为唯一的日期字符串,去掉了时间。将减速机的逻辑提取到 collectIfUniqueDateFromOrder 作用

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;
}

在里面 addItemsInList 我们只处理日期字符串

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);
}

-2

E_net4 Tunn 7 年前

你可以用 moment js解析日期,以便更改日期格式并使用 date object 并通过 Set

或你只需要使用子字符串就可以得到你的约会对象 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>

对于过滤,为了提高性能,您最好在后端进行过滤,每次用户点击您的页面时都会请求ajax date link