为什么我的原始API数据在更新时不会被删除？

Question

对以下代码段有疑问。如何通过daterangepicker更改 API网址中设置的日期范围，确保删除先前的表格内容并使用 API网址<中的新数据进行更新/强>

例如，代码段使用默认的 API网址加载，但在选择日期范围并返回另一个 API网址时，默认数据仍然保留，新数据将添加到下方

我只想要显示新数据。我错过了什么？

$(function() {
  var start = moment().subtract(29, 'days');
  var end = moment();
  let dateDates = start.format('YYYY-MM-DD') + ',' + end.format('YYYY-MM-DD');
  let defaultDeviceUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=DevicesDetection.getType&format=json&idSite=2&period=day&date=${dateDates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
  deviceAnalytics(defaultDeviceUrl);
  $('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    ranges: {
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'Last 90 Days': [moment().subtract(89, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  }, function(start, end) {

    let dates = start.format('YYYY-MM-DD') + ',' + end.format('YYYY-MM-DD');
    let deviceUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=DevicesDetection.getType&format=json&idSite=2&period=day&date=${dates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
    deviceAnalytics(deviceUrl);
  });

  function deviceAnalytics(deviceUrl) {
    $.getJSON(deviceUrl, (device_data) => {
      Array.prototype.groupBy = function(key) {
        var path = key.split('.');
        var result = {};
        try {
          this.forEach(function(item) {
            // es6: path.reduce((a, b) => a[b], item)
            type = path.reduce(function(a, b) {
              return a[b]
            }, item) || 'null';
            if (!result[type])
              result[type] = [];
            result[type].push(item);
          });
          return result;
        } catch (err) {
          console.log(err);
          return {};
        }
      };

      function getPropertySum(key, arr) {
        return arr.reduce((a, b) => (key in b ? a + b[key] : a), 0)
      }

      // one array of all dates
      let flattenArr = [].concat.apply([], Object.values(device_data));
      // object of grouped dates by device
      let groups = flattenArr.groupBy('label');
      let table = document.getElementById('display');
      Object.keys(groups).forEach(function(label) {
        let row = document.createElement('tr');
        let logw = document.createElement('td');
        let logo = document.createElement('img');
        let lab = document.createElement('td');
        let nbv = document.createElement('td');
        let nbu = document.createElement('td');
        row.appendChild(logw);
        row.appendChild(lab);
        row.appendChild(nbv);
        row.appendChild(nbu);
        logw.appendChild(logo);
        logo.src = 'https://discovrbookings.com/wp-content/themes/discovr-application/assets/img/device-icons/' + label + '.png';
        lab.innerHTML = label;
        nbv.innerHTML = getPropertySum('nb_visits', groups[label]);
        nbu.innerHTML = getPropertySum('nb_uniq_visitors', groups[label]);
        table.appendChild(row);
      });
    });
  };
});

#reportrange {
  border: 1px solid #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.27/daterangepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.27/daterangepicker.js"></script>

<div id="reportrange">
  <span>Choose Dates</span>
</div>
<table id="display"></table>

Answer 1

要清除桌子上的孩子......

行后：

let table = document.getElementById('display');

插入：

table.innerHTML = '';

注意：虽然最干净，但它不是最快的 - 更快的选择是：

var tNode = table;
while (tNode.firstChild) {
    tNode.removeChild(tNode.firstChild);
}        

这是一个简短的清单，我会选择更清洁的单行版本。