根据json对象中的日期和时间值过滤json输出

Question

I'm building a play data reporting tool for a radio station. The idea is to fetch play history from the playout software's API, then manually add tracks played from outside the playout software. The API outputs a daily playlog, from 00:00 to 24:00.

When in action, the user logs in to the system, sets the date and time of his/her show, then fetches the songs played in that timeframe into the report. What I don't know is how to filter the results from the json based on the hour in the "date" -value. HTML, jQuery, JSON examples below.

I've searched for other questions with similar problems but haven't find an answer. I'm pretty new to this so I don't know where to look next. Any help or tips how to improve my code is greatly appreciated!

jquery:

$('.gettracks').click(function() {
  const date = document.getElementById('date').value;
  const starthh = document.getElementById('starthh').value;
  const startmm = document.getElementById('startmm').value;
  const endhh = document.getElementById('endhh').value;
  const endmm = document.getElementById('endmm').value;


  $.getJSON(
    'https://www.playlogurl.com/playlog.php&date=' + date,
    function(data) {

      var items = [];
      $.each(data, function(key) {
        items.push(
          "<tr id='" +
            key +
            "'><td>" +
            data[key].date +
            '</td>' +
            '<td>' +
            data[key].artist +
            '</td>' +
            '<td>' +
            data[key].song +
            '</td>' +
            '<td>' +
            data[key].length +
             '</td>' +
            '</tr>'
        );
      });

      $('<tbody/>', {
        class: 'list',
        html: items.join('')
      }).appendTo('.my-new-list');
    }
  );
});

HTML snippets:
  <input type="text" id="starthh" /> :
  <input type="text" id="startmm" />
  <input type="text" id="endhh" /> :
  <input type="text" id="endmm" /> 

  <button class="gettracks">Get Tracks</button>
  <table class="my-new-list"></table>


JSON:
{
    "0": {
        "date": "2019-01-28 07:56:34",
        "artist": "Michal Jackson",
        "song": "Beat It",
        "album": "Beat It",
        "length": "4:48",
         ... other values
    },
    "1": {
        "date": "2019-01-28 08:12:39",
        "artist": "Iron Maiden",
        "song": "Run To The Hills",
        "album": "Trooper",
        "length": "4:28",
         ... other values
    },
   ...
    "30": {
        "date": "2019-01-28 12:02:39",
        "artist": "Ministry",
        "song": "No Glory",
        "album": "Trooper",
        "length": "4:28",
         ... other values
    },
    "31": {
        "date": "2019-01-28 12:15:03",
        "artist": "Killing Joke",
        "song": "Pylon",
        "album": "Euphoria",
        "length": "4:48",
         ... other values
    },
....
}

I would like to push to html only the songs that have played between the start and end times from html inputs "starthh" & "endhh" (12:00-16:00 for example).

Answer 1

I figured it out. Not sure if it's the best solution but seems to work. Just added this to the beginning of $each-loop:

    $.each(data, function(key) {
    let hoursfirst = data[key].date.charAt(11);
    let hourssecond = data[key].date.charAt(12);
    let hours = hoursfirst + hourssecond;
    hours = parseInt(hours);

    if (hours < starthh || hours >= endhh) {
      return;
    }
   ...
}