创建动态 JSON 表 HTML JS
我的示例 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>
我如何获得预期的输出？
慕的地82710181回答
-
弑天下
如果您有嵌套数据结构，则还必须遍历嵌套元素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;}
随时随地看视频慕课网APP
PHP