Javascript 基于startdate和enddate筛选JSON

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

$（“#getJsonSrc”）。单击（函数（）{
var$table=$（“#数据表”），
$startDate=$（“#dateFrom”）.val（），
$endDate=$（“#dateTo”）.val（），
$jsonSrc=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json“；//仅用于演示-在生产中，这将来自第一个输入值（）
/*这是不起作用的代码*/
$jsonSrc=filter（函数（i、fromDate、toDate）{
返回（$jsonSrc.date<$startDate&$jsonSrc.date>$endDate）
});
$table.bootstrapTable（“销毁”）；
$table.bootstrapTable（）；
$table.bootstrapTable（“刷新”{
url:$jsonSrc
});
});

基本上，我想要的是当用户单击search时，页面将获得JSON源URL，但只返回输入日期（包括输入日期）之间的数据。JSON然后被输出到引导数据表中

我通常会提供一个JSFIDLE示例，但是我没有办法让FIDLE读取外部JSON文件，所以希望代码笔示例可以：）

---

注意：我意识到引导表有一个过滤器扩展，但是这个过滤器扩展在获取数据后工作。我的用户将请求包含数千条记录的文件，我不能让他们获取所有记录，然后应用日期过滤器：）

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

我所做的更改：我通过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
    });
  });


});

$（“#getJsonSrc”）。单击（函数（）{
var$table=$（“#数据表”），
$startDate=新日期（$（“#dateFrom”）.val（）），
$endDate=新日期（$（“#dateTo”）.val（）），
$jsonSrc=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json";
$.getJSON（$jsonSrc）.success（函数（数据）{
my_数组=新数组（）；
对于（变量i=0；i如果（（this_date>=$startDate）&&（this_date证明我不需要
JSON.stringify（my_array）
，我需要使用
load
选项而不是
data
。下面是工作代码：


$（“#getJsonSrc”）。单击（函数（）{
$（“#数据表thead”）.show（）；
var$table=$（“#数据表”），
$startDate=新日期（$（“#dateFrom”）.val（）），
$endDate=新日期（$（“#dateTo”）.val（）），
$jsonSrc=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json";
变量my_数组；
$.getJSON（$jsonSrc）.success（函数（数据）{
my_数组=[]；
对于（变量i=0；i如果（（此日期>=$startDate）和（这不是一个javascript问题，如果你想让服务器过滤。根据定义，你的客户端javascript只能在下载后进行过滤。你会让ti实现某种web服务；如何实现取决于你的服务器端技术堆栈。真的吗？我在这里看到了许多其他客户端javascript过滤的示例因此，我还没有找到一个适合我的解决方案。就像和下面的例子一样，这两个例子都是在获取之后进行过滤的。他们只是在将数据加载到表之前进行过滤，但是数据正在下载到客户端。请不要使用[bootstrap]作为标记。这是另一个东西看起来它在控制台中工作，但如何在引导表中获取它呢？：）当我在codepen JS面板的第30行将
url:$jsonSrc
替换为
url:my_array
时，我得到错误
Uncaught ReferenceError:my_array未定义
，这是因为$table.bootstrapTable函数在创建my_array之前启动了很长一段时间。您必须在创建新数组之后运行bootstrapTable函数或者在创建my_数组后运行一个函数，所以将bootstrapTable函数放在console.log（my_数组）之后。对不起，我不明白你的意思。
$table.bootstrapTable（“刷新”，{url:$jsonSrc}）；
确实在
console.log（my_数组）之后
=/。你能更新你的代码笔来显示你的意思吗？不起作用。我认为它将JSON源代码转换为数组，所以我得到错误
404找不到url:[对象，对象，对象]
。我更新了我的笔，以便您可以在控制台中看到错误。这不起作用，因为选项“url”要求url。您应该找到另一个显示数据或其他内容的选项（在文档中），然后使用my_数组