我有一个表，该表由来自 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>
目前显示为
我希望它显示为
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);
}
个人中心
文章发布
退出
4
我是一名优秀的程序员,十分优秀！