Как очистить предыдущий результат API при создании нового запроса

Question

Поэтому я использую https://calendarific.com api и пытаюсь создать «приложение», в котором вы можете нажать на свою страну, и оно возвращает выходные дни, основанные на текущем месяце. Это работает, за исключением случаев, когда я нажимаю на одну страну, а затем на другую, результаты предыдущих стран остаются наверху, а выходные дни новой страны помещаются на нижнюю часть страницы.

Как удалить предыдущие результаты, когда новая один сделан?

Javascript (извините, если это немного грязно):

  countrySelect.addEventListener('click', function() {
    // Api url
        let url = `https://calendarific.com/api/v2/holidays?&api_key=a7167178ffb6d2d7d8d9c1e05d98eab926f595e9&country=${buttonValue}&year=2020`;

        fetch(url)
          .then(res => res.json())
          .then(data => {

        // Filters holiday's to the current month
            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;

            })


            // Build holiday table
            function buildTable(data){
              let table = document.getElementById('resultTable');


              let col = [];
              // Get the index of the api titles
                for (let i = 0; i < currentMonthHolidays.length; i++) {
                    for (let key in currentMonthHolidays[i]) {
                        if (col.indexOf(key) === -1) {
                            col.push(key);
                        }
                    }
                    console.log(col)
                }

                //Create table header row using the extracted headers above.
                let tr = table.insertRow(-1);                   // table row.

                for (let i = 0; i < col.length; i++) {
                    let th = document.createElement("th");      // table header.
                    th.innerHTML = col[i];
                    tr.appendChild(th);
                }


              // add json data to the table as rows.
              for (let i = 0; i < currentMonthHolidays.length; i++) {

                  tr = table.insertRow(-1);

                  for (let j = 0; j < col.length; j++) {
                      let tabCell = tr.insertCell(-1);
                      tabCell.innerHTML = currentMonthHolidays[i][col[j]];
                  }
              }

            }

            buildTable(currentMonthHolidays);


                console.log(currentMonthHolidays);

                //handles error
              }, networkError => {
                alert(networkError)
              })

          })

Answer 1

Если вас интересует только получение новых данных сверху, в своем коде просто добавьте: table.removeChild(table.tBodies[0]);

, что становится: -

countrySelect.addEventListener('click', function() {
    // Api url
        let url = `https://calendarific.com/api/v2/holidays?&api_key=a7167178ffb6d2d7d8d9c1e05d98eab926f595e9&country=${buttonValue}&year=2020`;

        fetch(url)
          .then(res => res.json())
          .then(data => {

        // Filters holiday's to the current month
            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;

            })


            // Build holiday table
            function buildTable(data){
              let table = document.getElementById('resultTable');


              let col = [];
              // Get the index of the api titles
                for (let i = 0; i < currentMonthHolidays.length; i++) {
                    for (let key in currentMonthHolidays[i]) {
                        if (col.indexOf(key) === -1) {
                            col.push(key);
                        }
                    }
                    console.log(col)
                }

                //Create table header row using the extracted headers above.
                let tr = table.insertRow(-1);                   // table row.

                for (let i = 0; i < col.length; i++) {
                    let th = document.createElement("th");      // table header.
                    th.innerHTML = col[i];
                    tr.appendChild(th);
                }
              /*
              since all <tr> are wrapped inside <tbody>, so just remove the old one and you are good to go 
              */
              table.removeChild(table.tBodies[0]); 
              // add json data to the table as rows.
              for (let i = 0; i < currentMonthHolidays.length; i++) {

                  tr = table.insertRow(-1);

                  for (let j = 0; j < col.length; j++) {
                      let tabCell = tr.insertCell(-1);
                      tabCell.innerHTML = currentMonthHolidays[i][col[j]];
                  }
              }

            }

            buildTable(currentMonthHolidays);


                console.log(currentMonthHolidays);

                //handles error
              }, networkError => {
                alert(networkError)
              })

          })