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

집

웹 프론트엔드

프런트엔드 Q&A

자바스크립트 JSON 변환

PHPz

May 22, 2023 am 09:20 AM

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

React의 한계는 무엇입니까?May 02, 2025 am 12:26 AM

반응 말 : 1) asteeplearningcurveduetoitsvastecosystem, 2) Seochallengswithclient-siderendering, 3) PlatiperFormanceIssUseInlargeApplications, 4) ComplexStateManagementAsAppSgrow, 및 5) theneedTokeEpupWithitsHouou

React의 학습 곡선 : 새로운 개발자를위한 도전May 02, 2025 am 12:24 AM

ReactisChallengingforbeginnersdueToitssteePlearningCurveanDParadigMshiftTocomponent 기반 Architection.1) 시작된 문서화 forasolidFoundation.2) startWithOficialDocumentationForAsolIdfoundation.2) 이해를 이해하는 방법

React에서 동적 목록을위한 안정적이고 고유 한 키 생성May 02, 2025 am 12:22 AM

thecorechallengeenderatingStableanduniquekysfordynamiclistsinconsengingconsententifiersacrossre-rendersforefficialdomupdates

JavaScript 피로 : React 및 그 도구로 최신 상태를 유지합니다May 02, 2025 am 12:19 AM

JavaScriptFatigueInreactismanageablewithstrestriveStriveStriveStiMelearningandcuratedInformationSources.1) 1))

usestate () 후크를 사용하는 테스트 구성 요소May 02, 2025 am 12:13 AM

TOTESTREACTCOMPONENTSUSINSUSISTATEHOOK, useJestAndReactTestingLibraryTosimulationInteractionsandStateChangeSintheUI.1) renderTheComponentAndCheckInitialState.2) SimulateUserActionSlikeClickSorformSubMissions.3) verifyTateRecerFectsin

React의 키 : 성능 최적화 기술에 대한 깊은 다이빙May 01, 2025 am 12:25 AM

keysinReactareCrucialforopiTizingPerformanceByIningIneficiveliceListEpdates.1) uskeyStoIndifyAndTrackListElements.2) revingArrayIndiceSkeyStopReverFormanceSues.3) 선택 가능한 식당 LikeItesteM.idtomaintaintAteAndimProvePerform

React의 열쇠는 무엇입니까?May 01, 2025 am 12:25 AM

RenderingListStoimproverCiliationeficiency를 사용하면 RECTKEYSAREUNIQUEINDIFIERSEDS (1) ISHELPREACTTRACKCHANGENLISTEMS, 2) 사용 ASSABLEANDUNICEIDERIDERSISTEMIDSISRECEMENDEND, 3) RepoySingArrayIndicesAskeyStopReventIsseswithReAdering 및 4) ENS