javascript - 如果 JSON 在 <table> 中返回空显示消息

Question

我有一个表，该表由来自 API 的 JSON 填充，有时没有数据。

如何在 <tr> 内返回“无数据”消息下表 if没有对象 label在 JSON 中找到？

我相信我定义的空数据已经通过

实现

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;

但是我怎样才能返回 No Data表内？

下面的代码片段显示了表格，以及您是否将 API URL 中的日期更改为，例如 2018-01-14,2018-01-15您将不会获得每个日期的数据返回。

$.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) {
        // 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 browserCode = ('segment');
  let flattenArr = [].concat.apply([], Object.values(browser_data));
  // object of grouped dates by device
  let groups = flattenArr.groupBy('label');
  let table = document.getElementById('browserTable');
  table.innerHTML = '';
  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);

    // Get the logo property and use split on the string
    logoProperty = getPropertySum('logo', groups[label]);
    var logoPropSplit = logoProperty.split("/");
    var logoName = logoPropSplit[logoPropSplit.length - 1];
    // End of edit

    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>

目前显示为

我希望它显示为

Answer 1

groups 对象要么包含数据，要么不包含数据。我添加了代码来检查它有多少个键。如果它超过 0，那么它会运行您当前的代码来构建显示数据的表。然后我添加了一个新的代码部分来检查它是否有 0 个键。如果是这样，它会构建一个更简单的表，显示“无数据”。

查看工作 jsfiddle这里。在 jsfiddle 中，我包含了两个 url 定义。一个被注释掉了。注释掉相反的一项即可查看有数据或无数据的表格。

并查看下面的相关代码:

if (Object.keys(groups).length > 0) {
  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);

    // Get the logo property and use split on the string
    logoProperty = getPropertySum('logo', groups[label]);
    var logoPropSplit = logoProperty.split("/");
    var logoName = logoPropSplit[logoPropSplit.length - 1];
    // End of edit

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

if (Object.keys(groups).length == 0) {
    let row = document.createElement('tr');
    let nodata = document.createElement('td');
    row.appendChild(nodata);
    nodata.innerHTML = "No Data"
    table.appendChild(row);
}