无法显示 API 结果

Question

So I'm learning API's and I am using https://calendarific.com api and I have fetched the api and am able to console log the results. 我的问题实际上是显示 api 的结果。

我试图将名称保存到变量中（像这样）

myVariable.innerHTML = data.name;

myVariable 包含一个 object 和嵌套的 arrays: {holidays: [Arrays]} 但我无法显示它。

如果有帮助，这里是我的代码：

  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));
});

希望这可以帮助