创建动态 JSON 表 HTML JS答案

【问题标题】：create dynamic JSON table HTML JS创建动态 JSON 表 HTML JS
【发布时间】：2020-04-06 14:59:05
【问题描述】：

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

我如何获得预期的输出？

【问题讨论】：

你的 JSON 还好吗？有错别字，除此之外还有很多嵌套元素，正常吗？
@clota974 是的，我的 json 没问题。我在这里付款时一定错过了报价，现在更正，其余的都是正确的。

标签： javascript html css json

【解决方案1】：

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

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

【讨论】：