Javascript 创建动态JSON表HTMLJS

我的示例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中的一列中

我希望以如下表格格式检索此文件：

到目前为止，我尝试了下面的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;
}

var myList
$.ajax({
键入：“获取”，
url:“症状列表.php”，
成功：功能（数据）{
console.log（数据）
myList=JSON.parse（数据）
log（JSON.parse(
（数据）
);
/*警报（数据）；*///显示来自php脚本的响应。
},
});
函数buildHtmlTable（选择器）{
var columns=addAllColumnHeaders（myList，选择器）；
对于（变量i=0；i

HTML:

我现在的输出是：

Date                      mydata
2020-04-05 18:26:01       <blank>
2020-04-05 18:26:17       <blank>

datemydata
2020-04-05 18:26:01       
2020-04-05 18:26:17       

---

如何获得预期的输出？

如果有嵌套的数据结构，还必须遍历嵌套的元素

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

函数buildHtmlTable（选择器）{
var columns=addAllColumnHeaders（myList，选择器）；
对于（变量i=0；i

您的JSON正常吗？有一个输入错误，但除此之外，还有很多嵌套元素，这正常吗？@clota974是的，我的json还可以。我一定是在这里付款时错过了一个报价，现在更正了，其余的都是正确的。

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