通过 jQuery 循环 JSON

简介

当你在开发 web 应用程序时，通常需要获取服务器返回的数据，很多时候这些数据是以 JSON 格式返回的。在获取到 JSON 数据后，我们需要将其展示在页面上或进行相关的操作。在这种情况下，你需要知道如何使用 JavaScript 和 jQuery 遍历 JSON 数据。

步骤

我们假设我们获取到以下 JSON 数据：

{
    "employees": [
        {
            "firstName": "John",
            "lastName": "Doe",
            "age": 25
        },
        {
            "firstName": "Jane",
            "lastName": "Doe",
            "age": 18
        },
        {
            "firstName": "Bob",
            "lastName": "Smith",
            "age": 32
        }
    ]
}

我们将按以下步骤使用 jQuery 遍历 JSON 数据：

1. 首先，我们需要解析 JSON 数据并将其存储在一个变量中，可以使用 $.getJSON() 方法来获取 JSON 数据。例如：

$(document).ready(function() {
    $.getJSON("employees.json", function(data) {
        // 在这里对 JSON 数据进行操作
    });
});

2. 接下来，我们需要使用 $.each() 方法遍历 JSON 数据并对每个对象进行操作。例如：

$(document).ready(function() {
    $.getJSON("employees.json", function(data) {
        $.each(data.employees, function(i, employee) {
            // 在这里对每个员工进行操作
        });
    });
});

3. 在 $.each() 方法的回调函数中，我们可以访问 JSON 数据中的属性。例如：

$(document).ready(function() {
    $.getJSON("employees.json", function(data) {
        $.each(data.employees, function(i, employee) {
            $(".employee-list").append('<li>' + employee.firstName + ' ' + employee.lastName + '</li>');
        });
    });
});

在这个例子中，我们将每个员工的名字和姓氏添加到 employee-list 元素中。

完整代码

$(document).ready(function() {
    $.getJSON("employees.json", function(data) {
        $.each(data.employees, function(i, employee) {
            $(".employee-list").append('<li>' + employee.firstName + ' ' + employee.lastName + '</li>');
        });
    });
});

总结

使用 jQuery 遍历 JSON 数据是很常见的任务。可以通过以下步骤轻松遍历 JSON 数据：

1. 解析 JSON 数据并将其保存到一个变量中；
2. 使用 $.each() 方法遍历 JSON 数据；
3. 在 $.each() 方法中修改数据。

参考资料

• jQuery.each()
• jQuery.getJSON()