JavaScriptのJSON変換-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptの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>

ログイン後にコピー

この例では、テーブルヘッダーとテーブル本体を含む基本的なテーブル構造を作成します。ヘッダーには、名前、年齢、性別の 3 つの列が含まれています。次の手順では、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 データ内の各オブジェクトをループし、名前、年齢、性別の 3 つのテーブルセルを各行に追加します。最後に、各行をテーブル本体に追加します。

完全な 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 テーブルに表示する方法を学びました。これは、データを表示する必要があるフロントエンド開発者にとって非常に重要なスキルです。この記事の紹介を通じて、この関数の実装方法を理解し、ご自身のプロジェクトに適用できることを願っています。

以上がJavaScriptのJSON変換の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。