javascript - 根据开始日期和结束日期过滤 JSON

Question

我的 JSON 如下所示:

[
  {
    "date": "2015-06-19",
    "operator": "ums.dam",
    "type": "General Query",
    "subType": "Sales",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-17",
    "operator": "ums.rdl",
    "type": "General Query",
    "subType": "Media",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-17",
    "operator": "ums.dam",
    "type": "General Query",
    "subType": "Other",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-16",
    "operator": "ums.djf",
    "type": "General Query",
    "subType": "Press",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-15",
    "operator": "ums.djf",
    "type": "Troubleshooting",
    "subType": "Service",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-15",
    "operator": "ums.djf",
    "type": "General Query",
    "subType": "Sales",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-15",
    "operator": "ums.djf",
    "type": "General Query",
    "subType": "Other",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-04",
    "operator": "ums.jxh",
    "type": "Account Maintenance",
    "subType": "Add/Remove Feature",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-04",
    "operator": "ums.djf",
    "type": "Account Maintenance",
    "subType": "Add/Remove Feature",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-04",
    "operator": "ums.djf",
    "type": "Troubleshooting",
    "subType": "Service",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-04",
    "operator": "ums.djf",
    "type": "General Query",
    "subType": "Other",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-01",
    "operator": "ums.djf",
    "type": "General Query",
    "subType": "Manual Activation",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  },
  {
    "date": "2015-06-01",
    "operator": "ums.djf",
    "type": "General Query",
    "subType": "Manual Activation",
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
  }
]

JSON 来自外部源，并且在生产中是动态的，但所有源都将具有相同的结构。

用户将有三个输入:

1. 第一个输入用于选择 JSON 源(出于演示目的已删除)
2. 第二个输入用于选择开始返回 JSON 数据的开始日期(例如 2015-06-01)
3. 第三个输入用于选择结束返回 JSON 数据的结束日期(例如 2015-06-19)

这是 HTML 表单:

<div class="row">
    <form id="search" role="form" style="border:0">
      <div class="col-md-3">
        <ul class="nav nav-stacked">
          <li><strong>From Date</strong></li>
          <li>

            <input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateFrom" />


          </li>
        </ul>
      </div>

      <div class="col-md-3">
        <ul class="nav nav-stacked">
          <li><strong>To Date</strong></li>
          <li>

            <input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateTo" />

          </li>
        </ul>
      </div>

      <div class="col-md-3">
        <ul class="nav nav-stacked">
          <li>&nbsp;</li>
          <li>

            <button class="btn btn-primary" type="button" id="getJsonSrc">Search</button>

          </li>
        </ul>
      </div>
    </form>
  </div>
  <!-- Row -->

这是 JavaScript:

$("#getJsonSrc").click(function() {
  var $table = $("#dataTable"),
    $startDate = $("#dateFrom").val(),
    $endDate = $("#dateTo").val(),
    $jsonSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json"; //for demo only - in production this will come from 1st input val()

  /* This is the code that is not working */

  $jsonSrc = filter(function(i, fromDate, toDate) {
    return ($jsonSrc.date < $startDate && $jsonSrc.date > $endDate)
  });

  $table.bootstrapTable("destroy");
  $table.bootstrapTable();
  $table.bootstrapTable("refresh", {
    url: $jsonSrc
  });
});

本质上，我想要的是当用户单击搜索时，页面获取 JSON 源 URL，但仅返回输入日期之间的数据(包括输入日期)。然后将 JSON 输出到 bootstrap 数据表中。

我通常提供一个 jsFiddle 示例，但是我无法让 fiddle 读取外部 JSON 文件，所以希望 codepen 示例没问题:)

http://codepen.io/lordtubington/pen/GJOVpy

注意:我意识到 Bootstrap 表有一个过滤器扩展 https://github.com/lukaskral/bootstrap-table-filter但是，此过滤器扩展在获取数据后才起作用。我的用户将请求包含数千条记录的文件，我无法让他们获取所有记录，然后应用日期过滤器:)

Answer 1

我通过以下方式修复了代码:

http://codepen.io/anon/pen/pJdMxv

我所做的更改:我通过 jquery 加载了 json，为开始日期、结束日期和 obj 日期创建了日期对象，然后创建了一个新数组并将所有匹配的日期推送到数组中。

$("#getJsonSrc").click(function() {
  var $table = $("#dataTable"),
    $startDate = new Date($("#dateFrom").val()),
    $endDate = new Date($("#dateTo").val()),
    $jsonSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json";

  $.getJSON($jsonSrc).success(function(data) {
    my_array = new Array();

    for (var i = 0; i < data.length; i++) {
      var this_date = new Date(data[i].date);
      if ((this_date >= $startDate) && (this_date <= $endDate)) {
        my_array.push(data[i]);
      }
    }
    console.log(my_array);

    $table.bootstrapTable("destroy");
    $table.bootstrapTable();
    $table.bootstrapTable("refresh", {
        url: my_array
    });
  });


});