亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

創建動態 JSON 表 HTML JS

創建動態 JSON 表 HTML JS

PHP
慕的地8271018 2023-11-06 15:36:52
我的示例 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/blank2020-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>我如何獲得預期的輸出?
查看完整描述

1 回答

?
弒天下

TA貢獻1818條經驗 獲得超8個贊

如果您有嵌套數據結構,則還必須遍歷嵌套元素


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;

}



查看完整回答
反對 回復 2023-11-06
  • 1 回答
  • 0 關注
  • 158 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號