API返回空JSON时如何在表格<tr>中显示"No Data"提示

我来帮你搞定这个问题！你的核心需求是当API返回空数据（比如指定日期没有浏览器访问记录）时，表格不再空空如也，而是显示清晰的"No Data"提示。咱们先梳理下现有代码的问题：

当没有数据时，groups会变成一个空对象，Object.keys(groups)返回的是空数组，导致后续的forEach循环根本不会执行，表格自然就没有任何内容。那咱们只需要在生成表格内容前，加一个判断：如果没有数据，就手动创建一行提示内容。

修改步骤： #

1. 在遍历groups生成数据行之前，先检查groups是否为空
2. 如果为空，创建一个跨列的表格行，显示"No Data"提示
3. 如果不为空，继续执行原来的行生成逻辑

修改后的完整代码： #

$.getJSON('https://discovrbookings.innocraft.cloud/index.php?module=API&method=DevicesDetection.getBrowsers&idSite=2&period=day&date=2017-12-17,2018-01-05&format=json&token_auth=68aa5bd12137f13255dcb98794b65dff', (browser_data) => {
  Array.prototype.groupBy = function(key) {
    var path = key.split('.');
    var result = {};
    try {
      this.forEach(function(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)
  }

  let flattenArr = [].concat.apply([], Object.values(browser_data));
  let groups = flattenArr.groupBy('label');

  let table = document.getElementById('browserTable');
  table.innerHTML = '';

  // 新增：判断是否有数据
  if (Object.keys(groups).length === 0) {
    // 创建提示行
    let emptyRow = document.createElement('tr');
    let emptyCell = document.createElement('td');
    // 跨4列（对应表格的logo、label、访问量、独立访客4个列）
    emptyCell.colSpan = 4;
    emptyCell.textContent = 'No Data';
    // 优化样式：居中显示+内边距，提升视觉体验
    emptyCell.style.textAlign = 'center';
    emptyCell.style.padding = '1rem';
    emptyRow.appendChild(emptyCell);
    table.appendChild(emptyRow);
  } else {
    // 原有逻辑：生成数据行
    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);

      logoProperty = getPropertySum('logo', groups[label]);
      var logoPropSplit = logoProperty.split("/");
      var logoName = logoPropSplit[logoPropSplit.length - 1];

      logo.src = 'https://discovrbookings.com/wp-content/themes/discovr-application/assets/img/browser-icons/' + logoName;
      lab.innerHTML = label;
      nbv.innerHTML = getPropertySum('nb_visits', groups[label]);
      nbu.innerHTML = getPropertySum('nb_uniq_visitors', groups[label]);

      table.appendChild(row);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="browserTable">
</table>

关键说明： #

• 用Object.keys(groups).length === 0判断无数据状态，因为空对象的键数组长度为0
• colSpan = 4确保提示单元格横跨表格所有列，避免布局错乱
• 额外添加的样式让提示更醒目，你可以根据自己的页面风格调整样式参数

内容的提问来源于stack exchange，提问作者Darren