我的示例 JSON 数据类似于: 我的所有行的数据字段不是同一组字段。
[{"date":"2020-04-05 18:26:01", "mydata":{"city":{"name":"paris"},"travel":{"frequency":"5","climate":"cold"}}},
{"date":"2020-04-05 18:26:17", "mydata":{"city":{"name":"amsterdam"},"fly":{"airports":"1","type":"international"}}}]
这被保存到我的 MariaDB 的一列中。
我想以表格格式检索它，例如:
Date mydata-city-name travel-frequency travel-climate fly-airports fly-type 2020-04-05 18:26:01 paris 5 cold null/blank null/blank 2020-04-05 18:26:17 amsterdam null/blank null/blank 1 international
到目前为止我尝试了下面的js和html 但我无法按预期获取数据:
Javascript:
var myList
$.ajax({
type: "GET",
url: "symptom_list.php",
success: function (data) {
console.log(data)
myList = JSON.parse(data)
console.log(JSON.parse(
data)
);
/* alert(data); */ // show response from the php script.
},
});
function buildHtmlTable(selector) {
var columns = addAllColumnHeaders(myList, selector);
for (var i = 0; i < myList.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) cellValue = "";
row$.append($('<td/>').html(cellValue));
}
$(selector).append(row$);
}
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records.
function addAllColumnHeaders(myList, selector) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$(selector).append(headerTr$);
return columnSet;
}
HTML:
<body onLoad="buildHtmlTable('#excelDataTable')">
<table id="excelDataTable" border="1">
</table>
</body>
我现在的输出是:
Date mydata
2020-04-05 18:26:01 <blank>
2020-04-05 18:26:17 <blank>
如何获得预期的输出？
最佳答案
如果您有嵌套数据结构，则还必须遍历嵌套元素
function buildHtmlTable(selector) {
var columns = addAllColumnHeaders(myList, selector);
for (var i = 0; i < myList.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = getCellValue(myList[i], columns[colIndex]);
if (cellValue == null)
cellValue = "";
row$.append($('<td/>').html(cellValue));
}
$(selector).append(row$);
}
}
function addAllColumnHeaders(myList, selector) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
recursiveHeaderCheck(rowHash, selector, "", columnSet, headerTr$);
}
$(selector).append(headerTr$);
return columnSet;
}
function recursiveHeaderCheck(ListElement, selector, parentKeyname, columnSet, headerTr$) {
if (typeof ListElement === 'object') {
if (parentKeyname != '')
parentKeyname = parentKeyname + '-';
for (var key in ListElement) {
var keyname = parentKeyname + key;
recursiveHeaderCheck(ListElement[key], selector, keyname, columnSet, headerTr$);
}
} else {
if ($.inArray(parentKeyname, columnSet) == -1) {
columnSet.push(parentKeyname);
headerTr$.append($('<th/>').html(parentKeyname));
}
}
}
function getCellValue(nestedStructure, columnHeader) {
var subElement = nestedStructure;
var subHeaders = columnHeader.split("-");
for (var k = 0; k < subHeaders.length; k++) {
if (typeof subElement === 'object' && subElement != null)
subElement = subElement[subHeaders[k]];
}
return subElement;
}
关于javascript - 创建动态 JSON 表 HTML JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61048372/