jQuery 如何从JSON文件中提取数据并在HTML表格中显示

JSON（JavaScript Object Notation）已经变得流行，并提供了一种轻量级和清晰易读的布局，用于在服务器和Web应用程序之间传递信息。借助jQuery这个强大的JavaScript库，您可以轻松地从JSON文档中获取数据并在HTML表格中显示。要运行附近的代码，需要一个Web服务器。或者，可以使用一个带有实时服务器插件的代码编辑器。

语法

$.getJSON()

AJAX请求可以通过这个函数从文件中检索JSON数据。

该函数接受两个参数：

URL：主要参数是我们想要检索记录的JSON文档或API终点的URL。它可以是相对或绝对URL。

data：第二个参数是一个可选参数，允许我们发送额外的统计数据请求。该参数可以是对象或以查询字符串格式的字符串。

$.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’。
表头定义在<thead>标签中，包含四个列：”姓名”，”邮箱”，”电话”和”投资”。
表体定义在<tbody>标签中。这是动态插入JSON数据的地方。
<script>标签包含jQuery代码。
此函数在DOM加载完成后才执行代码。
$.getJSON()函数允许从’jsonexdata.json’中检索JSON数据。
使用$.each()函数迭代检索到的数据。
针对JSON数据中的每个人员对象，创建一个新的表格行(<tr>)。
创建表格单元格(<td>)，并用人员对象中相应的数据填充。
使用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>