Filter JSON based on startdate and enddate

Question

My JSON looks like this:

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

The JSON comes from external sources and will be dynamic in production, but all sources will have this same structure.

The user will have three inputs:

1. first input to choose JSON source (removed for demo purposes)
2. second input to choose start date to begin returning JSON data (for example 2015-06-01)
3. third input to choose end date to end returning JSON data (for example 2015-06-19)

Here is the form 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 -->

Here is the 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
  });
});

Essentially what I want is when the user clicks search the page gets the JSON source URL, but only returns data between the inputted dates (including entered dates). The JSON is then outputted into bootstrap data table.

I typically provide a jsFiddle example, however I had no way of getting a fiddle to read an external JSON file, so hopefully a codepen example is okay :)

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

Note: I realize there is a filter extension for bootstrap table https://github.com/lukaskral/bootstrap-table-filter however this filter extension works AFTER the data has been fetched. My users will be requesting files with thousands of records, I can't have them fetching all the records and then applying date filters :)

Answer 1

I fixed the code by this:

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

The changes I made: I loaded the json by jquery, created date objects for the start date, end date and the obj date, then created a new Array and pushed all matched dates inside the array.

$("#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
    });
  });


});

Answer 2

Turns out I didn't need JSON.stringify(my_array) and I needed to use the load option instead of data. Below is the working code:

$("#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>