show div aligning with JSON data's 'Open Hours' date/time

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>