在 jQuery 中将 JSON 数组转换为 HTML 表格-JavaScript中文网-JavaScript教程资源分享门户

背景

在前端开发中，我们经常需要将数据以表格的形式展示出来。而对于一些后端 API 返回的数据，往往以 JSON 格式返回，这时候我们就需要将 JSON 转换成 HTML 表格并渲染到页面上。jQuery 是一个非常流行的 JavaScript 库，它提供了方便的 DOM 操作和 AJAX 请求功能，让我们可以更轻松地完成这个任务。

实现步骤

1. 获取 JSON 数组数据

首先，我们需要通过 AJAX 请求从后端获取 JSON 数据。假设我们的后端接口返回的是以下格式的 JSON 数组：

[
  {"name": "Alice", "age": 18},
  {"name": "Bob", "age": 20},
  {"name": "Charlie", "age": 22}
]

我们可以使用 jQuery 的 $.getJSON() 方法来发送 GET 请求并获取数据：

$.getJSON('/api/data', function(data) {
  // 在这里处理数据
});

2. 构建 HTML 表格结构

接下来，我们需要根据获取到的 JSON 数组数据构建 HTML 表格。首先，我们可以创建一个空的 <table> 元素，并添加表头行和表体行：

var table = $('<table></table>');
var header = $('<tr><th>Name</th><th>Age</th></tr>');
table.append(header);

然后，我们遍历 JSON 数组数据，为每个对象创建一行 <tr> 元素，并将其属性值添加到对应的 <td> 元素中：

$.each(data, function(index, item) {
  var row = $('<tr></tr>');
  row.append('<td>' + item.name + '</td>');
  row.append('<td>' + item.age + '</td>');
  table.append(row);
});

最终，我们将构建好的表格元素添加到页面中：

$('body').append(table);

3. 完整示例代码

-- -------------------- ---- -------
---------------------- -------------- -
  --- ----- - ---------------------
  --- ------ - ----------------------------------------
  ---------------------

  ------------ --------------- ----- -
    --- --- - ---------------
    ----------------- - --------- - ---------
    ----------------- - -------- - ---------
    ------------------
  ---

  ------------------------
---

总结

通过以上步骤，我们可以使用 jQuery 将 JSON 数组转换成 HTML 表格，并显示在页面上。这样的实现方式非常简单、直接，同时也具有较高的可扩展性和灵活性，可以根据不同的需求进行定制化开发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/12431