JavaScript를 사용하여 JSON 데이터에서 HTML 테이블을 동적으로 생성하려면 어떻게 해야 합니까?

JavaScript를 사용하여 JSON 데이터를 HTML 테이블로 변환

많은 작업에서는 JSON 데이터를 읽을 수 있는 대화형 형식으로 변환해야 합니다. 이는 종종 HTML 테이블 생성을 통해 수행될 수 있습니다. 열을 정의하고 데이터를 반복하는 수동 프로세스를 피하려면 동적 테이블 생성을 위해 JavaScript 라이브러리를 활용하는 것이 좋습니다.

다음은 맞춤형 JavaScript 솔루션을 사용하여 이를 달성하는 방법에 대한 예입니다.

var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

// Building HTML Table
function buildHtmlTable(selector) {
  // Column Headers
  var columns = addAllColumnHeaders(myList, selector);

  // Table Rows
  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]] || "";
      row$.append($('<td>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// Adding Column Headers
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;
}

이 사용자 정의 JavaScript 솔루션을 활용하면 사전에 열을 정의할 필요 없이 JSON 데이터에서 HTML 테이블을 동적으로 생성할 수 있습니다.

위 내용은 JavaScript를 사용하여 JSON 데이터에서 HTML 테이블을 동적으로 생성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!