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 は外部ソースから取得され、本番環境では動的になりますが、すべてのソースはこれと同じ構造になります。

ユーザーには次の 3 つの入力があります。

JSON ソースを選択するための最初の入力 (デモ用に削除)
JSON データを返し始める開始日を選択するための 2 番目の入力 (例: 2015-06-01 )
JSON データを返す終了日を選択するための 3 番目の入力 (例: 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のフィルター拡張機能があることは認識していますが、このフィルター拡張機能はデータがフェッチされた後に機能します。私のユーザーは、何千ものレコードを含むファイルを要求します。すべてのレコードを取得してから日付フィルターを適用することはできません:)

score 2 · Accepted Answer

私はこれでコードを修正しました：

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


});

javascript - 開始日と終了日に基づいて JSON をフィルタリングする

2 に答える 2

Related

Reference