How to filter JSON data by datepicker in Javascript?

Question

Hello I am a newbie programmer. I want to get data from my API with datepicker filter.This is my API URL:https://gmlews.com/api/data/?node_id=1

First, I choose the date that I want from my datepicker. And then the data will be displayed with console.log() command.

I know how to display all data, but I don't know how to display filtered data from datepicker. The filter that I made in my code doesn't work. I think my code is wrong. This is my first code: https://jsfiddle.net/estri012/2x3hmaLo/56/

   $(function() {
    
      $('input[name="datefilter"]').daterangepicker({
        showDropdowns: true,
        autoUpdateInput: false,
        locale: {
          cancelLabel: 'Clear'
        }
      });
    
      $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
        var fromDate = picker.startDate.format('YYYY-MM-DD');
        var toDate = picker.endDate.format('YYYY-MM-DD');
        if (fromDate != '' && toDate != '') {
          console.log(fromDate, toDate);
          var endpoint = 'https://gmlews.com/api/data/?node_id=1';
    
          $.ajax({
            method: "GET",
            url: endpoint,
            data: {
              fromDate: fromDate,
              toDate: toDate
            },
            success: function(data) {
              console.log(data);
        var resultData = data.filter(function (a) {
        var hitDates = a.timestamp || {};
        // extract all date strings
        hitDates = Object.keys(hitDates);
        var hitDateMatchExists = hitDates.some(function(dateStr) {
            var date = new Date(dateStr);
            return date >= fromDate && date <= toDate
        });
        return hitDateMatchExists;
    });
    console.log(resultData);
            } //function(data)end
          }); //ajax end
        } //if function end
    
        $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
          $(this).val('');
        });
    
      }); //apply button end
    
    }); //function end

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


    <ol class="breadcrumb">data from date : <input type="text" name="datefilter" value="" /></ol>

For example, I want to display all the data from 7 May until 8 May. So first, I pick 7 May to 8 May from my datepicker and then click apply. After I click apply, in the inspect element should show the data from 7 May until 8 May.

Can someone help me fix this code? Thankyou.

Does this answer your question? [How to compare two date values with jQuery](https://stackoverflow.com/questions/3004178/how-to-compare-two-date-values-with-jquery) — akaBase, May 20 '20 at 14:23
you are comparing dates with jquery? you just need to pare them and convert as shown in the question I posted — akaBase, May 20 '20 at 15:39
But i am not comparing. I filtering the data from jquery using datepicker — Estri. P Lestari, May 20 '20 at 16:53
yes but to filter them to show between to dates you need to compare the dates against your desired date range and those that are within it can then be used as you wish — akaBase, May 20 '20 at 17:34
I try to solve it but still can't do it. I think the logic is: if (fromDate <= data [i].timestamp <=toDate) then print data [i]. But I don't know how to put in the code — Estri. P Lestari, May 20 '20 at 21:10
@akaBase I try to implement it in my code. But it still didn't work. I think there is something wrong with my code. Can you help me? — Estri. P Lestari, May 21 '20 at 02:48

score 0 · Answer 1 · answered May 21 '20 at 03:16

It solved! I am using plugin underscore.js. This is my final code: https://jsfiddle.net/estri012/2x3hmaLo/71/

$(function() {

$('input[name="datefilter"]').daterangepicker({
    showDropdowns : true,
autoUpdateInput: false,
locale: {
    cancelLabel: 'Clear'
}
});

$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
var startDate = picker.startDate.format('YYYY-MM-DD');
var endDate = picker.endDate.format('YYYY-MM-DD');
if (startDate != '' && endDate != '') {
      console.log(startDate, endDate);
      var endpoint = 'https://gmlews.com/api/data/?node_id=1';

$.ajax({
method: "GET",
url: endpoint,
data: {
startDate: startDate,
endDate: endDate
},
success: function(data){
var data = data;
var filteredDates = _.filter(data, function(data){ 
return (data.timestamp > startDate &&  
    data.timestamp < endDate)
});
console.log(filteredDates);
} //function(data)end
}); //ajax end
} //if function end

$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});

}); //apply button end

}); //function end

How to filter JSON data by datepicker in Javascript?

1 Answers1