循环 JSON 数据使用 jQuery

介绍

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于传输和存储数据。jQuery 是一种流行的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画和 Ajax 等操作。本文将介绍如何使用 jQuery 循环 JSON 数据。

循环 JSON 数组

首先，我们来看如何循环 JSON 数组。假设有如下 JSON 数据：

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" },
  { "id": 3, "name": "Charlie" }
]

我们可以使用 jQuery 的 $.each 方法循环数组：

$.each(data, function(index, person) {
  console.log(person.id + ': ' + person.name)
})

这段代码会输出：

1: Alice
2: Bob
3: Charlie

下面是完整的代码：

let data = [
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" },
  { "id": 3, "name": "Charlie" }
]

$.each(data, function(index, person) {
  console.log(person.id + ': ' + person.name)
})

循环 JSON 对象

接下来，我们来看如何循环 JSON 对象。假设有如下 JSON 数据：

{
  "Alice": { "id": 1, "age": 20 },
  "Bob": { "id": 2, "age": 25 },
  "Charlie": { "id": 3, "age": 30 }
}

我们可以使用 jQuery 的 $.each 方法循环对象：

$.each(data, function(name, person) {
  console.log(name + ': ' + person.id + ', ' + person.age)
})

这段代码会输出：

Alice: 1, 20
Bob: 2, 25
Charlie: 3, 30

下面是完整的代码：

let data = {
  "Alice": { "id": 1, "age": 20 },
  "Bob": { "id": 2, "age": 25 },
  "Charlie": { "id": 3, "age": 30 }
}

$.each(data, function(name, person) {
  console.log(name + ': ' + person.id + ', ' + person.age)
})

小结

本文介绍了如何使用 jQuery 循环 JSON 数据。无论是循环数组还是循环对象，都可以使用 jQuery 的 $.each 方法来完成。这种方法比较简洁和直观，可以避免使用复杂的 for 循环语句。