根据 startdate 和 enddate 过滤 JSON答案

【问题标题】：Filter JSON based on startdate and enddate根据 startdate 和 enddate 过滤 JSON
【发布时间】：2015-06-26 00:37:14
【问题描述】：

我的 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 来自外部来源，在生产环境中是动态的，但所有来源都具有相同的结构。

用户将有三个输入：

选择 JSON 源的第一个输入（出于演示目的已删除）
第二个输入选择开始日期以开始返回 JSON 数据（例如 2015-06-01）
第三个输入选择结束日期以结束返回 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 输出到引导数据表中。

我通常会提供一个 jsFiddle 示例，但是我无法使用小提琴来读取外部 JSON 文件，因此希望 codepen 示例可以：)

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

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

【问题讨论】：

如果您希望服务器进行过滤，这并不是一个真正的 JavaScript 问题。根据定义，您的客户端 javascript 只能在下载后过滤它们。您将需要实现某种 Web 服务；如何取决于您的服务器端技术堆栈。
真的吗？我在 SO 上看到了许多其他客户端上的 javascript 过滤示例，只是还没有找到适合我的解决方案。喜欢stackoverflow.com/questions/21172289/… 和stackoverflow.com/questions/23720988/…
这两个例子都是在 fetch 之后过滤的，下面的例子也是如此。他们只是在将其加载到表中之前进行过滤，但数据正在下载到客户端。
请不要使用 [bootstrap] 作为标签。那是另一回事

标签： javascript jquery json twitter-bootstrap bootstrap-table

【解决方案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
    });
  });


});

【讨论】：

看起来它在控制台中工作，但我如何在我的引导表中获取它？ :) 当我在 codepen JS 面板的第 30 行将 url: $jsonSrc 替换为 url: my_array 时，我收到错误 Uncaught ReferenceError: my_array is not defined
这是因为 $table.bootstrapTable 函数在创建 my_array 之前很久就开始了。您必须在创建新数组后运行 bootstrapTable 函数，或者在创建 my_array 后运行函数，因此将 bootstrapTable 函数放在 console.log(my_array) 之后
对不起，我不明白你的意思。 $table.bootstrapTable("refresh", {url: $jsonSrc}); 确实出现在 console.log(my_array) =/ 之后。您能否更新您的代码笔以显示您的意思？
不起作用。我认为它将 JSON 源转换为数组，所以我收到错误 404 cannot find url:[Object, Object, Object]。我更新了我的笔 codepen.io/lordtubington/pen/GJOVpy，以便您可以在控制台中看到错误。
这不起作用，因为选项：'url' 要求提供 url。您应该找到另一个选项（在文档中）说数据或其他内容，然后使用 my_array

【解决方案2】：

原来我不需要JSON.stringify(my_array)，我需要使用load 选项而不是data。以下是工作代码：

$("#getJsonSrc").click(function() {
    $("#dataTable thead").show();
    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";

    var my_array;
    $.getJSON($jsonSrc).success(function(data) {
        my_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]);

            }
        }
        $table.bootstrapTable("load", my_array);
    });
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div class="container">
  <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" value="2015-06-17" />


          </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" value="2015-06-19" />

          </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 -->

  <div class="row">
    <div class="col-md-12">
      <table id="dataTable" data-toggle="table" data-pagination="true" data-page-size="5" data-page-list="5, 10, All" data-search="true" data-search-align="left" data-striped="true" data-show-refresh="true" data-sort-name="date" data-sort-order="desc">
        <thead>
          <tr>
            <th class="col-xs-1" data-field="date">Date</th>
            <th class="col-xs-1" data-field="operator">Operator</th>
            <th class="col-xs-2" data-field="type">Type</th>
            <th class="col-xs-2" data-field="subType">Sub Type</th>
            <th class="col-xs-5" data-field="message">Message</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

【讨论】：