資料結構
網路
關係資料庫管理系統
作業系統
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": "Sincere@april.biz",
"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.jquery.com/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.jquery.com/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.jquery.com/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+ 次檢視
