Question

我的表格由 JSON 填充 API ，有时候没有数据。

如何返回消息{$ 1}}下方<tr>内的“无数据” JSON 中找不到对象if？

我相信我正在使用

label

定义空数据，但如何在表格中返回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;？

下面的代码段显示了该表格，如果您将API网址中的日期更改为No Data，则每个日期的数据都不会得到回报。

< p>

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

目前，它显示为

，我希望将其显示为

Answer 1

groups对象将包含数据或不包含数据。我添加了代码来检查它有多少键。如果它大于0，则它运行您当前的代码以构建显示数据的表。然后我添加了一个新的代码部分，检查它是否有0键。如果是这样，它会构建一个更简单的表格，显示＆＃34;无数据＆＃34;。

请在此处查看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);
}

如果JSON返回空显示消息

1 个答案: