자바스크립트 JSON 변환-프런트엔드 Q&A-php.cn

자바스크립트 JSON 변환

PHPz

풀어 주다： 2023-05-22 09:20:37

원래의

477명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!