jquery: if current time fall between two times obtained from json

Question

I have the following json output:

    [{"shift":"1","start":"08:00","end":"20:00"},
     {"shift":"2","start":"09:00","end":"21:00"},
     {"shift":"3","start":"10:00","end":"22:00"},
     {"shift":"4","start":"11:00","end":"23:00"},
     {"shift":"5","start":"12:00","end":"00:00"},
     {"shift":"6","start":"13:00","end":"01:00"},
     {"shift":"7","start":"14:00","end":"02:00"} .... ]

And looking to print the shift number when current time fall between tow times, i.e: if current time is 10:30, then I will get:

shift 1 shift 2 shift 3

$.getJSON( "http://server/api/shifts", function( data )   {   
   $.each(data, function(index, item)    {
        var shiftStart = item.start,
        shiftEnd = item.end,
        now = moment().format("HH:mm") ; 
        if (now > shiftStart && now < shiftEnd) {
        var x = document.getElementById("shift_id");
        var option = document.createElement("option");
        option.text = item.shift;
        x.add(option);
        }    
    });  
 });

I get nothing in the select box

Some of those carry to next day. Will need to check if start is after end and add a day to end if it is. If it's now `15:00` is greater than last 3 starts but not less than less 3 ends but should be in range — charlietfl, Aug 09 '18 at 21:29
Possible duplicate of [Check if current time is between two given times in JavaScript](https://stackoverflow.com/questions/29785294/check-if-current-time-is-between-two-given-times-in-javascript) — Heretic Monkey, Aug 09 '18 at 21:42
I don't get the issue here... This code seems to be working fine. [**CodePen**](https://codepen.io/Bes7weB/pen/RBEgVa?editors=1011) -- What would be the test condition for *«I get nothing in the select box»*? — Louys Patrice Bessette, Aug 09 '18 at 22:43
Same question here. Seems to be working as written in Chrome, FireFox, MS Edge and IE11. Can you expand on the issue you are seeing as well as the test conditions to recreate what you're asking? — Bob Tate, Aug 10 '18 at 02:22
thanks @Louys for the CodePen, I will rebuild the API and will try from scrach — Hisham, Aug 10 '18 at 11:03
@LouysPatriceBessette btw, the code only work if the now < 12:00 , so never will display shitfts between 5 and 7 — Hisham, Aug 11 '18 at 19:05

score 0 · Accepted Answer · answered Aug 11 '18 at 20:08

The issue is when the shift ends on the next day.

The solution is to compare moment objects, on which we can set the time and add 1 day.

var data = [
  {"shift":"1","start":"08:00","end":"20:00"},
  {"shift":"2","start":"09:00","end":"21:00"},
  {"shift":"3","start":"10:00","end":"22:00"},
  {"shift":"4","start":"11:00","end":"23:00"},
  {"shift":"5","start":"12:00","end":"00:00"},
  {"shift":"6","start":"13:00","end":"01:00"},
  {"shift":"7","start":"14:00","end":"02:00"}
]

// getJSON commented out since it's a "simulated" request.
//$.getJSON( "http://server/api/shifts", function( data )   {   
  $.each(data, function(index, item){
    var start = item.start.split(":"),
        shiftStart = moment().hour(start[0]).minute(start[1]),
        end = item.end.split(":"),
        shiftEnd = moment().hour(end[0]).minute(end[1]),
        now = moment();

    // Forcing now to 13:30, just for this demo...
    now = now.hour(13).minute(30);

    if(shiftEnd<shiftStart){
      console.log("The shift "+item.shift+" ends on the next day.");
      shiftEnd.add(1,"d");
    }

    if (now > shiftStart && now < shiftEnd) {
      var x = document.getElementById("shift_id");
      var option = document.createElement("option");
      option.text = item.shift;
      x.add(option);
      console.log("Adding shift "+item.shift);
    }    
  });  
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

<select id="shift_id"></select>

working perfect , but not if: now > 23:59 i.e: now = now.hour(00).minute(00); or now = now.hour(01).minute(30); etc .. — Hisham, Aug 13 '18 at 11:49
mmm... I see. You will have to arbitrary define when to remove one day, instead of adding one. Like if `now<06:00`. But the **absolute** way to fix that is to have a the date in the json you receive (along with the time) to create some correct moment objects... Not based on assumptions.. So you wouldn't have to add or remove one day... There would be issue any due to "incomplete information" from the json. — Louys Patrice Bessette, Aug 13 '18 at 18:58

jquery: if current time fall between two times obtained from json

1 Answers1