如何使用 jQuery 从 JSON 文件获取数据并将其显示在 HTML 表格中?

htmljqueryjson更新于 2024/11/25 2:20:17

JSON(JavaScript 对象表示法)已变得非常流行，它提供了一种轻量级且易于阅读的格式，用于在服务器和 Web 应用程序之间交换数据。借助强大的 JavaScript 库 jQuery，您可以轻松地从 JSON 文档中获取数据并将其显示在 HTML 表格中。要在本地运行代码，需要 Web 服务器。或者，可以使用带有实时服务器插件的代码编辑器。

语法

$.getJSON()

此函数可用于利用 AJAX 请求从文件中检索 JSON 数据。

该函数接受两个参数:

URL:主要参数是我们要从中检索记录的 JSON 文档或 API 端点的 URL。它可以是相对 URL 或绝对 URL。

数据:第二个参数是可选参数，允许我们随请求发送额外的统计数据。此参数可以是查询字符串布局中的对象或字符串。

$.each(data, function(index, item)

回调函数使用此方法对每个 JSON 数组元素执行操作。index 和 item 参数分别表示数组中的当前索引和对象。您可以在 $.each() 循环中执行操作或访问 item 对象的属性。

示例

提供的代码是一个 HTML 文档，它使用 JavaScript 和 jQuery 在 HTML 表中显示 JSON 数据。它从名为"jsonexdata.json"的文件接收 JSON 数据，并根据这些信息动态生成表格行和列。

创建 JSON 文档:

创建一个名为 jasonexdata.json 的单独文件，并用 JSON 格式的示例记录填充该文件。在本例中，我们假设 JSON 记录包含一个项目数组，每个项目代表一个人的信息以及他们的投资金额。

我们需要将"jsonexdata.json"文件放在与 HTML 文件相同的目录中，以确保代码正常运行。

示例

[
  {
    "name": "Neehar peter",
    "email": "peterk36@gmail.com",
    "phone": "693-857-4120",
    "investment": "$5,200"
  },
  {
    "name": "Youssef Ibrahim",
    "email": "youssef221@ymail.com",
    "phone": "384-726-9150",
    "investment": "$7,500"
  },
  {
    "name": "Rajesh Kumar",
    "email": "rajesh@outlook.com",
    "phone": "246-135-7908",
    "investment": "$3,250"
  },
  {
    "name": "Mukesh Ratan",
    "email": "ratanm.23@hotmail.com",
    "phone": "570-912-6384",
    "investment": "$10,300"
  }
]

算法

<table> 元素构成表格，其 id 属性名为 'data-table'。
表头在标签内定义，包含四列:"姓名"、"邮箱"、"电话"和"投资"。
表体在标签内定义。这是 JSON 数据动态插入的位置。
`<script>` 标签包含 jQuery 代码。
此函数等待 DOM 加载过程完成后再继续执行代码。
$.getJSON() 函数可以从"jsonexdata.json"中检索 JSON 数据。
使用 $.each() 函数对检索到的数据进行迭代。
对于 JSON 数据中的每个 person 对象，都会创建一个新的表格行 (<tr>)。
创建表格单元格 (<td>) 并用 person 对象中的相应数据填充。
通过 tableBody.append(row) 将行合并到表体中程序。

示例

<!DOCTYPE html>
<html>
<head>
  <title>Example:Display json Data to HTML Table</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
  /* CSS styles for the page */
  body {
    font-family: Arial, sans-serif;
  }

  h1 {
    text-align: center;
    color: #333;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border: 2px double #ddd;
  }

  th, td {
    padding: 10px 15px;
    text-align: left;
    color: #fff; /* Set the text color for table cells */
    border: 2px double #ddd;
    background-color: #454b4e; /* Set your desired color here */
    font-size: 24px;
  }

  th {
    background-color: #f2f2f2;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #333; /* Set the text color for table headers */
  }

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  tr:hover {
    background-color: #f5f5f5;
  }
  </style>
</head>
<body>
  <h1>JSON Data to HTML Table</h1>
  <table id="data-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Investment</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <!-- JavaScript code using jQuery -->
  <script>
    $(document).ready(function() {
      // Retrieve JSON data from "jsonexdata.json" file
      $.getJSON("jsonexdata.json", function(data) {
        var tableBody = $("#data-table tbody");

        // Iterate over each person object in the JSON data
        $.each(data, function(index, person) {
          var row = $("<tr></tr>"); // Create a new table row

          // Create table cells and fill them with the person's data
          row.append($("<td></td>").text(person.name));
          row.append($("<td></td>").text(person.email));
          row.append($("<td></td>").text(person.phone));
          row.append($("<td></td>").text(person.investment));

          tableBody.append(row); // Add the row to the table body
        });
      });
    });
  </script>
</body>
</html>