Как отобразить результаты API на основе месяца

Question

enter code here Итак, я изучаю API и создаю «приложение», которое возвращает праздники вашей страны в текущем месяце.

Я знаю, что должен сравнить текущий месяц с месяцем праздников а затем вернуть праздники, которые находятся в месяце. Это код, который я до сих пор.

var currentMonthHolidays = data.response.holidays.filter(holiday => {
        var holidayDate = new Date(holiday.date.iso);
        var holidayMonth = holidayDate.getMonth();
        var date = new Date();
        var currentMonth = date.getMonth();
        return currentMonth === holidayMonth;
      })

Моя проблема в том, как я могу отобразить результаты. Если это поможет, я использую https://calendarific.com API.

Javascript:

  // Page elements
  let countrySelect = document.getElementById('country-select');
  let holidayName = document.getElementById('holiday-name')
  let holidayDesc = document.getElementById('holiday-desc')
  let holidayDate = document.getElementById('holiday-date')
  let holidayType = document.getElementById('holiday-type')
  let info = document.querySelector('.cell')

// api url
  const api = `https://calendarific.com/api/v2/holidays?&api_key=<my api key>&country=ca&year=2020`;

// When the button is clicked fetch results
countrySelect.addEventListener('click', function() {
  fetch(api)
  .then(res => res.json())
      .then(data => {

        var currentMonthHolidays = data.response.holidays.filter(holiday => {
        var holidayDate = new Date(holiday.date.iso);
        var holidayMonth = holidayDate.getMonth();
        var date = new Date();
        var currentMonth = date.getMonth();
        return currentMonth === holidayMonth;
      })

// This only returns the first result. I have a table which these results are displayed in.
        holidayName.innerHTML = data.response.holidays[0].name;
        holidayDesc.innerHTML = data.response.holidays[0].description;
        holidayDate.innerHTML = data.response.holidays[0].date.iso;
        holidayType.innerHTML = data.response.holidays[0].type;

          console.log(data);
      }, networkError => {
        alert(networkError)
      })
      .catch(err => console.log(err));
  })

HTML:

    <h1 class="heading">Find your countries holiday.</h1>

// Only one country available for now

          <div class="country-select" id="country-select">
            <button id="option0" value="ca">Canada</button>
         </div>


      <!-- Table -->
      <div class="limiter">
      <div class="container-table100">
        <div class="wrap-table100">
            <div class="table">

              <div class="row header">
                <div class="cell">
                  Holiday Name
                </div>
                <div class="cell">
                  Holiday Description
                </div>
                <div class="cell">
                  Holiday Date
                </div>
                <div class="cell">
                  Holiday Type
                </div>
              </div>

              <div class="row">
                <div class="cell" id="holiday-name" data-title="Holiday Name">

                </div>
                <div class="cell" id="holiday-desc" data-title="Holiday Description">

                </div>
                <div class="cell" id="holiday-date" data-title="Holiday Date">

                </div>
                <div class="cell" id="holiday-type" data-title="Holiday Type">

                </div>
              </div>
            </div>
        </div>
      </div>
    </div>