Возникли проблемы с отображением результатов API

Question

Итак, я изучаю API, и я использую https://calendarific.com api, и я получил api и могу сохранять результаты в консоли. Моя проблема на самом деле отображает результат API.

Я попытался сохранить имя в переменной (например)

myVariable.innerHTML = data.name;

myVariable содержит объект с вложенными массивами: {праздничные дни: [массивы]}, но у меня возникли проблемы

Если это поможет, вот мой код:

  let countrySelect = document.getElementById('country-select');
  let holidayName = document.querySelector('holiday-name')
  let holidayDesc = document.querySelector('holiday-desc')


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


// Get results on click
countrySelect.addEventListener('click', function() {
  fetch(api)
  .then(response => {
    return response.json();
   })
    .then(data => {
      holidayName = data.response;
      console.log(data)
    });
  })

Answer 1

 var btn = document.querySelector('#option0');
 var holiday = document.querySelector('holiday-name');
 var holidayDesc = document.querySelector('holiday-desc');

btn.addEventListener('click', function fetchApi(){
    fetch('https://calendarific.com/api/v2/holidays?api_key=<my api key>&country=ca&year=2019')
    .then(res => res.json())
    .then(data => {
       holiday.innerHTML = data.response.holidays[0].name;
        //console.log(data);
    })
    .catch(err => console.log(err));
});

Надеюсь, это поможет