title: How to filter JSON data by datepicker in Javascript?
body: <p>Hello I am a newbie programmer.
  I want to get data from my API with datepicker filter.This is my API URL:<a href="https://gmlews.com/api/data/?node_id=1" rel="nofollow noreferrer">https://gmlews.com/api/data/?node_id=1</a></p>
  
  <p>First, I choose the date that I want from my datepicker. And then the data will be displayed with console.log() command.</p>
  
  <p>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: <a href="https://jsfiddle.net/estri012/2x3hmaLo/56/" rel="nofollow noreferrer">https://jsfiddle.net/estri012/2x3hmaLo/56/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   $(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 != '' &amp;&amp; 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 &gt;= fromDate &amp;&amp; date &lt;= 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</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /&gt;
  
  
      &lt;ol class="breadcrumb"&gt;data from date : &lt;input type="text" name="datefilter" value="" /&gt;&lt;/ol&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>Can someone help me fix this code? Thankyou.</p>