Disable buttons if there is no data in the database-CodePudding

I have a restaurant reservation form on the page, and there is a time selection.

Now here, using json, I get the working time for each day of the restaurant from the database, and in the javascript I take this data and hide the extra time.

Now everything works as it should, but only when the data for all days of the week is filled in. But it happens that there may be a day off, and accordingly there will be no data for this day of the week.

And now if we remove the data for some day from the let json list, we will get the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'open')

How can I determine if there is no data for some day, then when it is selected, disable the button btn? (now it does not work here, but when you click on this button, a list should appear over time, unfortunately so far it has not been possible to put it in the snippet)

let restaurantReserve = {
  init: function() {
    let _self = this;

    $('[aria-labelledby="reservation-time"] li a').click(function() {
      $(this).closest('ul').find('a').removeClass('active');
      $(this).addClass('active');
      let input = $('[name="RestaurantReservationForm[time]"]');
      input.val($(this).data('value'));
      _self.unSetError(input);
      $('#reservation-time .js-value').text($(this).text());
    });
  },
  setError: function(ob) {
    $('#'   ob.data('btnId')).addClass('btn-error');
  },
  unSetError: function(ob) {
    $('#'   ob.data('btnId')).removeClass('btn-error');
  }
}
restaurantReserve.init();

let json = [{
  "id": 86,
  "restaurant_id": 1,
  "day": "Mon",
  "open": "9.30",
  "close": "14.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 87,
  "restaurant_id": 1,
  "day": "Tue",
  "open": "3.00",
  "close": "21.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 88,
  "restaurant_id": 1,
  "day": "Wed",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 89,
  "restaurant_id": 1,
  "day": "Thu",
  "open": "2.30",
  "close": "7.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 90,
  "restaurant_id": 1,
  "day": "Fri",
  "open": "3.00",
  "close": "22.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 91,
  "restaurant_id": 1,
  "day": "Sat",
  "open": "0",
  "close": "4.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 92,
  "restaurant_id": 1,
  "day": "Sun",
  "open": "3.00",
  "close": "20.30",
  "created_at": "2022-02-22 10:56:15"
}];

function getWorkHours(json, restaurant_id) {
  return json.filter(item => item.restaurant_id == restaurant_id);
}

function getWorkHoursForDay(json, restaurant_id, day) {
  return getWorkHours(json, restaurant_id).filter(item => item.day === day)[0];
}

function filterTimes() {
  let restaurantID = 1;
  let dayofweek = document.getElementById("dayofweek").value;
  if ((["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].indexOf(dayofweek) >= 0)) {
    let workHours = getWorkHoursForDay(json, restaurantID, dayofweek);
    let items = document.querySelectorAll(".dropdown-menu.dropdown-menu-height-fixed li a");
    for (let item of items) {
      let itemValueParts = item.innerText.split(" ");
      itemValue = parseFloat(itemValueParts[0])   (((itemValueParts[1] === "PM") && (itemValueParts[0] !== "00.00")) ? 12 : 0);
      item.parentNode.classList[((itemValue < parseFloat(workHours.open)) || (itemValue > parseFloat(workHours.close)) ? "add" : "remove")]("invisible");
    }
  }
}

.btn {
  border: none;
  border-radius: 8px;
  height: 40px;
  padding: 10px 15px;
  font-weight: 800;
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
}

.btn-fourth {
  text-decoration: none;
  background: #e3e5e8;
  color: #747b8b;
}

.btn-fourth:hover {
  background: #747b8b;
  color: #fff;
}

.invisible {
  display: none;
}

ul.with-out>li:before,
.dropdown-menu li:before,
ul.whithout>li:before {
  display: none;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu-height-fixed {
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-item.active,
.dropdown-item:active {
  background: red;
}

.block-shadow {
  box-shadow: 0 2px 8px 0 rgba(32, 35, 44, 0.05);
}

.block-white {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="reservation" action="/restaurants/123/" method="post">
  <div >
    <div >
      <a  id="reservation-time" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span ></span> <span >
                        -- : --                </span>
      </a>

      <select id="dayofweek" onchange="filterTimes()">
        <option>Please Select Day</option>
        <option value="Mon">Mon</option>
        <option value="Tue">Tue</option>
        <option value="Wed">Wed</option>
        <option value="Thu">Thu</option>
        <option value="Fri">Fri</option>
        <option value="Sat">Sat</option>
        <option value="Sun">Sun</option>
      </select>
      <ul  aria-labelledby="reservation-time">
        <li><a  href="#" data-value="0.00">00.00 PM</a></li>
        <li><a  href="#" data-value="0.30">00.30 AM</a></li>
        <li><a  href="#" data-value="1.00">01.00 AM</a></li>
        <li><a  href="#" data-value="1.30">01.30 AM</a></li>
        <li><a  href="#" data-value="2.00">02.00 AM</a></li>
        <li><a  href="#" data-value="2.30">02.30 AM</a></li>
        <li><a  href="#" data-value="3.00">03.00 AM</a></li>
        <li><a  href="#" data-value="3.30">03.30 AM</a></li>
        <li><a  href="#" data-value="4.00">04.00 AM</a></li>
        <li><a  href="#" data-value="4.30">04.30 AM</a></li>
        <li><a  href="#" data-value="5.00">05.00 AM</a></li>
        <li><a  href="#" data-value="5.30">05.30 AM</a></li>
        <li><a  href="#" data-value="6.00">06.00 AM</a></li>
        <li><a  href="#" data-value="6.30">06.30 AM</a></li>
        <li><a  href="#" data-value="7.00">07.00 AM</a></li>
        <li><a  href="#" data-value="7.30">07.30 AM</a></li>
        <li><a  href="#" data-value="8.00">08.00 AM</a></li>
        <li><a  href="#" data-value="8.30">08.30 AM</a></li>
        <li><a  href="#" data-value="9.00">09.00 AM</a></li>
        <li><a  href="#" data-value="9.30">09.30 AM</a></li>
        <li><a  href="#" data-value="10.00">10.00 AM</a></li>
        <li><a  href="#" data-value="10.30">10.30 AM</a></li>
        <li><a  href="#" data-value="11.00">11.00 AM</a></li>
        <li><a  href="#" data-value="11.30">11.30 AM</a></li>
        <li><a  href="#" data-value="12.00">00.00 AM</a></li>
        <li><a  href="#" data-value="12.30">00.30 PM</a></li>
        <li><a  href="#" data-value="13.00">01.00 PM</a></li>
        <li><a  href="#" data-value="13.30">01.30 PM</a></li>
        <li><a  href="#" data-value="14.00">02.00 PM</a></li>
        <li><a  href="#" data-value="14.30">02.30 PM</a></li>
        <li><a  href="#" data-value="15.00">03.00 PM</a></li>
        <li><a  href="#" data-value="15.30">03.30 PM</a></li>
        <li><a  href="#" data-value="16.00">04.00 PM</a></li>
        <li><a  href="#" data-value="16.30">04.30 PM</a></li>
        <li><a  href="#" data-value="17.00">05.00 PM</a></li>
        <li><a  href="#" data-value="17.30">05.30 PM</a></li>
        <li><a  href="#" data-value="18.00">06.00 PM</a></li>
        <li><a  href="#" data-value="18.30">06.30 PM</a></li>
        <li><a  href="#" data-value="19.00">07.00 PM</a></li>
        <li><a  href="#" data-value="19.30">07.30 PM</a></li>
        <li><a  href="#" data-value="20.00">08.00 PM</a></li>
        <li><a  href="#" data-value="20.30">08.30 PM</a></li>
        <li><a  href="#" data-value="21.00">09.00 PM</a></li>
        <li><a  href="#" data-value="21.30">09.30 PM</a></li>
        <li><a  href="#" data-value="22.00">10.00 PM</a></li>
        <li><a  href="#" data-value="22.30">10.30 PM</a></li>
        <li><a  href="#" data-value="23.00">11.00 PM</a></li>
        <li><a  href="#" data-value="23.30">11.30 PM</a></li>
      </ul>
    </div>
    
    <div >
      <input type="hidden" id="restaurantreservationform-time"  name="RestaurantReservationForm[time]" data-btn-id="reservation-time">
    </div>

CodePudding user response：

You should have a list of possible days and match up the data with that.

const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

const json = [{
  "id": 86,
  "restaurant_id": 1,
  "day": "Mon",
  "open": "9.30",
  "close": "14.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 87,
  "restaurant_id": 1,
  "day": "Tue",
  "open": "3.00",
  "close": "21.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 88,
  "restaurant_id": 1,
  "day": "Wed",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 89,
  "restaurant_id": 1,
  "day": "Thu",
  "open": "2.30",
  "close": "7.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 90,
  "restaurant_id": 1,
  "day": "Fri",
  "open": "3.00",
  "close": "22.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 91,
  "restaurant_id": 1,
  "day": "Sat",
  "open": "0",
  "close": "4.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 92,
  "restaurant_id": 1,
  "day": "Sun",
  "open": "3.00",
  "close": "20.30",
  "created_at": "2022-02-22 10:56:15"
}];

const jsonMissing = [{
  "id": 86,
  "restaurant_id": 1,
  "day": "Mon",
  "open": "9.30",
  "close": "14.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 88,
  "restaurant_id": 1,
  "day": "Wed",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 89,
  "restaurant_id": 1,
  "day": "Thu",
  "open": "2.30",
  "close": "7.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 91,
  "restaurant_id": 1,
  "day": "Sat",
  "open": "0",
  "close": "4.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 92,
  "restaurant_id": 1,
  "day": "Sun",
  "open": "3.00",
  "close": "20.30",
  "created_at": "2022-02-22 10:56:15"
}];

const getOptionsData = ({
  days,
  data
}) => {
  return days.reduce((a, c) => {
    const dayData = data.find(({
      day
    }) => day === c)
    let nextDay = {
      value: c,
      disabled: true
    }
    if (dayData) nextDay.disabled = false
    return [...a, nextDay]
  }, [])
}

const getOptionHtml = ({
  value,
  disabled
}) => `<option value="${value}" ${disabled && "disabled"}>${value}</option>`
const renderOptions = ({
  select,
  data
}) => {
  const html = data.map(getOptionHtml).join('')
  select.innerHTML = html
}

// all days:
const select = document.getElementById("select")
const optionsData = getOptionsData({
  days,
  data: json
})
renderOptions({
  select,
  data: optionsData
})

// some days missing:
const select2 = document.getElementById("select2")
const optionsData2 = getOptionsData({
  days,
  data: jsonMissing
})
renderOptions({
  select: select2,
  data: optionsData2
})

<div id="container">
  <select id="select">
  </select>
  <select id="select2">
  </select>
</div>