создать динамический c JSON стол HTML JS - PullRequest
Новая
       1

создать динамический c JSON стол HTML JS

2 голосов
/ 05 апреля 2020

Мой пример 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>

как мне получить ожидаемый результат?

1 Ответ

2 голосов
/ 06 апреля 2020

Если у вас есть вложенная структура данных, вам также необходимо перейти во вложенные элементы 

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...