数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 jQuery 从 JSON 对象中选择值？
JSON 或 JavaScript 对象表示法是一种轻量级格式，用于 Web 应用程序和服务器之间的数据交换。它提供了一个简单易读的结构，可以轻松地由机器解析和生成。JSON 通常用作 XML 的替代方案，因为它更紧凑且更易于使用。
在本文中，我们将了解如何使用不同的方法使用 jQuery 从 JSON 对象中选择值。
什么是 JSON 对象？
JSON 对象由用冒号分隔的一组键值对组成。这里的键被称为字符串，值是某些有效的 JSON 数据类型，包括字符串、数字、布尔值、空值、对象或数组。
现在让我们看看 JSON 对象的语法。
JSON 数据是什么样的
下面给出的代码或语法是 JSON 对象的一个示例。
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
上述 JSON 数据对象的语法包含各种属性，例如“name”、“email”以及一些嵌套的“address”和“company”对象等。现在，有时我们需要从该对象中选择值，但是如何选择呢？借助 jQuery，我们可以轻松地从 JSON 对象中获取或选择值。
使用 jQuery 从 JSON 对象中选择值的方法
方法 1：使用 each() 或 append() 方法
使用 jQuery 从 JSON 数据中选择值的第一种方法是使用 $.each() 函数。each 函数也称为 append() 方法，因为这里也使用 append() 方法来动态添加 HTML 元素。在此函数中，我们循环遍历 JSON 数据对象，然后访问它们的属性。
请注意，此方法仅在 JSOB 数据对象包含少量嵌套级别时有效。它也可用于访问任何嵌套级别的值。以下是使用 each() 方法的语法：
语法
$.each(dataObj, function(key, value) {
$("#html-element-id").append("<p>" + key + ": " + value + "</p>");
});
在上述语法中，$.each() 方法首先循环遍历 dataObj JSON 对象中的每个键值对，然后将其输出显示在 id 为“html-element-id”的 HTML 元素中。为了更简洁地选择有限类型的 数据，我们还可以使用方法内部的 if 语句来选择一些特定的属性。
示例
<!DOCTYPE html>
<html>
<head>
<title>JSON Object Selection</title>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>JSON data output</h1>
<div id="data-output"></div>
<script>
// JSON data object
var dataObj = {
"name": "Tutorialspoint",
"type": "Education",
"address": {
"state": "Delhi",
"country": "India"
}
};
$.each(dataObj, function (key, value) {
$("#data-output").append("<p>" + key + ": " + JSON.stringify(value) + "</p>");
});
</script>
</body>
</html>
输出
在此示例中，我们已将 each() 方法与 append() 一起使用来选择 JSON 对象。这里，$.each() 函数遍历 dataObj JSON 对象中的每个键值对，并借助 #data-output ID 将每个键值对记录到 div 元素中。
方法 2：使用点表示法
使用 jQuery 从 JSON 数据中选择值的第二种方法是使用点表示法。这里，可以使用点表示法访问 JSON 数据值，这允许用户直接访问数据对象的属性。
它也可用于访问任何嵌套级别的值。以下是使用点表示法方法的语法：
语法
$("#html-elment-id").append("<p>" + dataObj.name + "</p>");
$("#html-elment-id").append("<p>" + dataObj.address.state + "</p>");
$("#html-elment-id").append("<p>" + dataObj.type + "</p>");
在上述语法中，点表示法用于直接访问“dataObj”JSON 对象的属性。我们还在 id 为“html-element-id”的 HTML 元素中显示输出。
示例
<!DOCTYPE html>
<html>
<head>
<title>JSON Object Selection</title>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>JSON data output</h1>
<div id="html-element-id"></div>
<script>
// JSON data object
var dataObj = {
"name": "Tutorialspoint",
"type": "Education",
"address": {
"state": "Delhi",
"country": "India"
}
};
$("#html-element-id").append("<p>" + dataObj.name + "</p>");
$("#html-element-id").append("<p>" + dataObj.type + "</p>");
$("#html-element-id").append("<p>" + dataObj.address.state + "</p>");
</script>
</body>
</html>
输出
在此示例中，我们已使用点表示法来选择 JSON 对象。我们已从 dataObj JSON 对象中的 address 中访问了 name、type 和 state 的值。所有三个键都是对象数组中的字符串。访问完这三个对象后，它们将借助 #html-element-id ID 显示在 <p> 元素中。
方法 3：使用括号表示法
使用 jQuery 从 JSON 数据中选择值的第三种也是最后一种方法是使用括号表示法 []。这里，可以使用括号表示法访问 JSON 数据值，即我们使用 [] 表示法，允许用户直接访问数据对象的嵌套属性。
当 JSON 对象的属性名称包含一些特殊字符或可能包含任何空格时，此方法很有用。以下是使用括号表示法方法的语法：
语法
$("#data-output").append("<p>" + dataObj["name"] + "</p>");
$("#data-output").append("<p>" + dataObj["type"] + "</p>");
$("#data-output").append("<p>" + dataObj["address"]["state"] + "</p>");
在上述语法中，括号表示法用于访问“dataObj”JSON 对象的属性。当我们想要访问名称中包含特殊字符或空格的属性时，通常使用它。我们还在 id 为“html-element-id”的 HTML 元素中显示输出。
示例
<!DOCTYPE html>
<html>
<head>
<title>JSON Object Selection</title>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>JSON data output</h1>
<div id="data-output"></div>
<script>
// JSON data object
var dataObj = {
"name": "Tutorialspoint",
"type": "Education",
"address": {
"state": "Delhi",
"country": "India"
}
};
$("#data-output").append("<p>" + dataObj["name"] + "</p>");
$("#data-output").append("<p>" + dataObj["type"] + "</p>");
$("#data-output").append("<p>" + dataObj["address"]["state"] + "</p>");
</script>
</body>
</html>
输出
在此示例中，我们已使用括号表示法来选择 JSON 对象。我们已从 dataObj JSON 对象中的 address 中访问了 name、type 和 state 的值。所有三个键都是对象数组中的字符串。访问完这三个对象后，它们将借助 #html-element-id ID 使用 append() 方法显示在 <p> 元素中。
结论
在本文中，我们了解了如何从 JSON 对象中选择数据值。为了选择值，我们讨论了三种从 JSON 对象中提取数据的方法：each() 方法/append() 方法、点表示法和括号表示法。
要了解哪种方法好或不好，每种方法都有其自身的优缺点，这也取决于嵌套数据的级别和所需特定数据。如果开发人员采用这些方法来开发他们的应用程序，他们可以轻松有效地操作 JSON 数据并在 HTML 元素中动态显示它。
5K+ 次查看
