자바스크립트 JSON 변환

PHPz원래의: 2023-05-22 09:20:37361검색

HTML 테이블로 변환하는 방법에 대한 자세한 튜토리얼

프런트엔드 개발에서는 JavaScript와 JSON을 사용하는 것이 매우 일반적인 기술입니다. JSON 데이터를 HTML 테이블로 변환하여 데이터를 표시하는 것은 매우 실용적인 기능입니다. 이 기사에서는 JavaScript를 사용하여 JSON 데이터를 HTML 테이블로 변환하는 방법을 소개합니다.

JSON 데이터 생성

먼저 데이터가 포함된 JSON 개체를 생성해야 합니다. 다음은 간단한 예입니다.

var data = [
  {"name": "John", "age": 26, "gender": "Male"},
  {"name": "Lucy", "age": 23, "gender": "Female"},
  {"name": "Tom", "age": 30, "gender": "Male"}
];

HTML 테이블의 기본 구조 만들기

HTML 파일에서는 테이블 헤더와 테이블 본문을 포함하여 테이블의 기본 구조를 만들어야 합니다. 다음은 기본 테이블 구조의 예입니다.

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

이 예에서는 테이블 헤더와 테이블 본문이 포함된 기본 테이블 구조를 만듭니다. 헤더에는 이름, 나이, 성별이라는 세 개의 열이 포함되어 있습니다. 다음 단계에서는 JavaScript를 사용하여 테이블 본문의 내용을 동적으로 추가하겠습니다.

JavaScript를 사용하여 테이블 본문을 동적으로 생성합니다

다음으로 JavaScript를 사용하여 테이블 본문을 동적으로 생성해야 합니다. 다음은 코드 예제입니다.

var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];

for (var i = 0; i < data.length; i++) {
  var row = document.createElement("tr");

  var nameCell = document.createElement("td");
  var nameText = document.createTextNode(data[i].name);
  nameCell.appendChild(nameText);
  row.appendChild(nameCell);

  var ageCell = document.createElement("td");
  var ageText = document.createTextNode(data[i].age);
  ageCell.appendChild(ageText);
  row.appendChild(ageCell);

  var genderCell = document.createElement("td");
  var genderText = document.createTextNode(data[i].gender);
  genderCell.appendChild(genderText);
  row.appendChild(genderCell);

  tbody.appendChild(row);
}

이 예제에서는 먼저 id를 통해 테이블 요소를 가져온 다음 테이블 본문 요소를 가져옵니다. 다음으로 for 루프를 사용하여 JSON 데이터의 각 개체를 반복하고 각 행에 이름, 나이, 성별이라는 세 개의 테이블 셀을 추가합니다. 마지막으로 테이블 본문에 각 행을 추가합니다.

완전한 HTML 파일 코드

<!DOCTYPE html>
<html>
<head>
  <title>JSON to HTML Table</title>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script>
    var data = [
      {"name": "John", "age": 26, "gender": "Male"},
      {"name": "Lucy", "age": 23, "gender": "Female"},
      {"name": "Tom", "age": 30, "gender": "Male"}
    ];

    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName("tbody")[0];

    for (var i = 0; i < data.length; i++) {
      var row = document.createElement("tr");

      var nameCell = document.createElement("td");
      var nameText = document.createTextNode(data[i].name);
      nameCell.appendChild(nameText);
      row.appendChild(nameCell);

      var ageCell = document.createElement("td");
      var ageText = document.createTextNode(data[i].age);
      ageCell.appendChild(ageText);
      row.appendChild(ageCell);

      var genderCell = document.createElement("td");
      var genderText = document.createTextNode(data[i].gender);
      genderCell.appendChild(genderText);
      row.appendChild(genderCell);

      tbody.appendChild(row);
    }
  </script>
</body>
</html>

확장 기능: jQuery AJAX를 사용하여 JSON 데이터 가져오기

JSON 데이터가 백그라운드 서비스에서 가져온 경우 jQuery AJAX를 사용하여 JSON 데이터를 가져올 수 있습니다. 다음은 샘플 코드입니다.

$.ajax({
  url: 'your_data_url',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName("tbody")[0];

    for (var i = 0; i < data.length; i++) {
      var row = document.createElement("tr");

      var nameCell = document.createElement("td");
      var nameText = document.createTextNode(data[i].name);
      nameCell.appendChild(nameText);
      row.appendChild(nameCell);

      var ageCell = document.createElement("td");
      var ageText = document.createTextNode(data[i].age);
      ageCell.appendChild(ageText);
      row.appendChild(ageCell);

      var genderCell = document.createElement("td");
      var genderText = document.createTextNode(data[i].gender);
      genderCell.appendChild(genderText);
      row.appendChild(genderCell);

      tbody.appendChild(row);
    }
  }
});

이 예에서는 jQuery의 ajax 메서드를 사용하여 데이터를 가져옵니다. 귀하가 제공한 데이터 URL에서 데이터를 가져오며, 데이터 유형은 JSON 형식입니다. 데이터를 성공적으로 얻은 후에는 이전 코드를 사용하여 이를 HTML 테이블로 변환합니다.

결론

이 기사에서는 JavaScript와 JSON을 사용하여 HTML 테이블에 데이터를 표시하는 방법을 배웠습니다. 이는 데이터를 표시해야 하는 프런트엔드 개발자에게 매우 중요한 기술입니다. 이 글의 소개를 통해 이 기능을 구현하는 방법을 이해하고 자신의 프로젝트에 적용할 수 있기를 바랍니다.

위 내용은 자바스크립트 JSON 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：여러 개를 선택하는 자바스크립트 다중 선택 상자다음 기사：여러 개를 선택하는 자바스크립트 다중 선택 상자