显示与 JSON 数据的“开放时间”日期/时间对齐的 div

Question

I essentially just want to show a div when the users current date and time aligns with the 'Open Hours' defined in my JSON data.. If the users current date/time is outside of the JSON data's open hours; simply hide the same div.

---

Below is the current JS I have : (note, I need to do this in vanilla JS; ES6, ideally. definitely no jQuery)

document.addEventListener('DOMContentLoaded', () => { 
  loadSVGs();
  fetch('https://www.website.com/wp-obfuscate/date/v9/stuff/options')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {

    const hoursoperation = document.getElementById('hours-operation'); 
      console.log(myJson.date['office_hours']);

      var d = new Date(); 
      var dayOfWeek = d.getDay();
      var hour = d.getHours();
      console.log(d);
      console.log(dayOfWeek);
      console.log(hour);

      function matchingDay(hoursoperations) {
        return hoursoperations === dayOfWeek;
      }
      console.log(Object.values(myJson.date).findIndex(matchingDay));

      // Show  element
      var show = function (hoursoperation) {
        hoursoperation.style.display = 'block';
      };
      // Hide an element
      var hide = function (hoursoperation) {
        hoursoperation.style.display = 'none';
      };
      //...

Below is the sample JSON response.

0: {day: "7", starting_time: "0800", closing_time: "1600"}
1: {day: "1", starting_time: "0600", closing_time: "1600"}
2: {day: "2", starting_time: "0600", closing_time: "1600"}
3: {day: "3", starting_time: "0600", closing_time: "1600"}
4: {day: "4", starting_time: "0600", closing_time: "1600"}
5: {day: "5", starting_time: "0600", closing_time: "1600"}
6: {day: "6", starting_time: "0700", closing_time: "1700"}
length: 7
__proto__: Array(0)

I simply would like to show my div #hours-operation ONLY when the current date/time aligns with my JSON data 'open hours'.

I started coming up with the below piece as well; but am getting lost again.

  // const isActive = starting_time <= closing_time   // test the shift type (normal or inverted)
  // ? (starting_time <= now && closing_time > now)   // normal comparison
  // : (starting_time <= now || closing_time > now);  // inverted comparison
  // console.log(isActive)

For instance; currently this: console.log(Object.values(myJson.date).findIndex(matchingDay));

Prints -1 in the console; which I am not sure how to use/continue with.....

---

Here is yet another technique I was trying:

 function findMatching(data, date) {
      const dayOfWeek = (date.getDay()||7).toString();
      const time =
        date.getHours().toString().padStart(2,'0') +
        date.getMinutes().toString().padStart(2,'0');
      return data.find( item =>
        item.day === dayOfWeek && (
          item.starting_time <= time &&
          time < item.closing_time 
        )
      );
    }

    console.log(findMatching("test" + data, new Date));

but am getting the below console error :

Uncaught (in promise) TypeError: data.find is not a function
    at findMatching (index.js:43)
    at eval (index.js:48)

Answer 1

Here is one solution..

 var openChema = [ {day: "7", starting_time: "0800", closing_time: "1600"}, {day: "1", starting_time: "0600", closing_time: "1600"}, {day: "2", starting_time: "0600", closing_time: "1600"}, {day: "3", starting_time: "0600", closing_time: "1600"}, {day: "4", starting_time: "0600", closing_time: "1600"}, {day: "5", starting_time: "0600", closing_time: "1600"}, {day: "6", starting_time: "0700", closing_time: "1700"}] var d = new Date(); var day = d.getDay() var weekDay = openChema.filter(x => x.day == day ) var n = d.getHours() < 10? "0" +d.getHours(): d.getHours(); var m = d.getMinutes() < 10? "0" +d.getMinutes(): d.getMinutes(); var starting_time = (parseInt(weekDay[0].starting_time) / 100) * 3600; var closing_time = (parseInt(weekDay[0].closing_time) / 100) * 3600; var now = (parseInt(n+""+m) /100) * 3600 const hoursoperation = document.getElementById('hours-operation') if(now>starting_time && now<closing_time){ hoursoperation.style.display = 'block'; }else{ hoursoperation.style.display = 'none'; }

 <div id="hours-operation" >Hello welcome</div>

Answer 2

Your findMatching() function works fine. You got an error because the function expects the first parameter is an array but you passed a string "test" + data .

Also you should compare the time as Number instead of String.

 const data = [ {day: "7", starting_time: "0800", closing_time: "1600"}, {day: "1", starting_time: "0600", closing_time: "1600"}, {day: "2", starting_time: "0600", closing_time: "1600"}, {day: "3", starting_time: "0600", closing_time: "1600"}, {day: "4", starting_time: "0600", closing_time: "1600"}, {day: "5", starting_time: "0600", closing_time: "1600"}, {day: "6", starting_time: "0700", closing_time: "1700"}]; function findMatching(data, date) { const dayOfWeek = (date.getDay()||7).toString(); const time = date.getHours() * 100 + date.getMinutes(); return data.find( item => item.day === dayOfWeek && ( +item.starting_time <= time && time < +item.closing_time ) ); } console.log(findMatching(data, new Date("October 13, 2019 11:13:00"))); // valid console.log(findMatching(data, new Date("October 13, 2019 16:01:00"))); // not valid