資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 過濾巢狀的 JSON 物件以返回特定值？
概述
JavaScript 中的物件是一組包含在花括號內、以鍵值對形式表示的資料。JavaScript 中的物件是透過使用花括號並在其中定義一組資料來建立的。巢狀的 JSON 物件也是一組鍵值對，但在巢狀中，鍵包含一組繼承在其內的物件。我們可以使用兩種格式訪問 JSON 物件中的值：第一種方法是直接訪問值，第二種方法是使用 filter() 方法。filter() 方法返回一個對於傳遞給 filter() 方法內部的回撥函式作為條件的值為 true 的值。
語法
從物件中直接訪問值的語法是。
當在陣列內部建立巢狀的 JSON 物件時。
arrayVariableName[indexNumber].keyName
當在物件內部建立巢狀的 JSON 物件時。
objectVariableName.keyName
演算法
步驟 1 - 在您的文字編輯器中建立一個 HTML 檔案，檔名設定為“index.html”，並將 HTML 基本結構新增到 index.html 檔案中。
步驟 2 - 現在建立一個空的父 div 容器，該容器將包含從巢狀的 JSON 物件返回的輸出，向父容器新增一個 id 名稱作為“Output”。
<div id="Output"></div>
步驟 3 - 現在在結束的 body 標籤之前新增 script 標籤。
<script> </script>
步驟 4 - 現在建立一個數組以將巢狀的 JSON 物件新增到其中。
var details = [];
步驟 5 - 現在使用一些巢狀的鍵值對將 JSON 資料新增到陣列中。
var details = [{
"CustomerName": "Aman",
"Items": { "Product1": "Maggi", "Product2": "Pizza" },
"TotalAmount": 4000
},
{
"CustomerName": "Alex",
"Items": { "Product1": "Cold_Drink", "Product2": "Rajma", "Product3": "Cups" },
"TotalAmount": 8000
},
{
"CustomerName": "Zoya",
"Items": { "Product1": "Rasins", "Product2": "Cashew", "Product3": "Almonds" },
"TotalAmount": 5000
},
{
"CustomerName": "Amir",
"Items": { "Product1": " Oil ", "Product2": " Soaps ", "Product3": " Fruits " },
"TotalAmount": 45000
}
];
步驟 6 - 現在使用 JavaScript DOM 屬性訪問我們上面使用 id 名稱建立的父 div 容器。
document.getElementById("Output");
步驟 7 - 使用 innerHTML 屬性向容器新增一個表格。使用基本的 HTML 建立表格。
document.getElementById("Output").innerHTML = ``;
步驟 8 - 現在在表格資料中使用語法訪問物件的鍵並將其插入到表格資料區域。
document.getElementById("Output").innerHTML = `
<table border="2" align="center" style="text-align: center;">
<tr>
<th> Customer Name </th>
<th> Items </th>
<th> Total Amount </th>
</tr>
<tr>
<td> `+ details[2].CustomerName + ` </td>
<td>`+ details[2].Items.Product1 + `<br>` + details[2].Items.Product2 + `<br>` + details[1].Items.Product3 + `</td>
<td> Rs.`+ details[2].TotalAmount + ` </td>
</tr>
</table>
`;
步驟 9 - 成功建立了巢狀 JSON 物件的過濾器，該過濾器將返回特定值。
示例
在此示例中，我們將使用 JavaScript 語法建立一個巢狀的 JSON 物件，並且還將使用直接訪問屬性訪問巢狀 JSON 的鍵。為此，我們將建立一個空陣列，然後將 JSON 物件資料插入到陣列中。插入資料後，我們將直接訪問它並將其顯示到表格中。
<html>
<head>
<title> filter nested objects using JavaScript </title>
<style>
td,
th {
padding: 0 0.5rem;
}
</style>
</head>
<body>
<h3 style="text-align: center;">Returning value from nested object by direct access</h3>
<div id="Output"></div>
<script>
var details = [{
"CustomerName": "Aman",
"Items": { "Product1": "Maggi", "Product2": "Pizza" },
"TotalAmount": 4000
},
{
"CustomerName": "Alex",
"Items": { "Product1": "Cold_Drink", "Product2": "Rajma", "Product3": "Cups" },
"TotalAmount": 8000
},
{
"CustomerName": "Zoya",
"Items": { "Product1": "Rasins", "Product2": "Cashew", "Product3": "Almonds" },
"TotalAmount": 5000
},
{
"CustomerName": "Amir",
"Items": { "Product1": " Oil ", "Product2": " Soaps ", "Product3": " Fruits " },
"TotalAmount": 45000
}
];
document.getElementById("Output").innerHTML = `
<table border="2" align="center" style="text-align: center;">
<tr>
<th> Customer Name </th>
<th> Items </th>
<th> Total Amount </th>
</tr>
<tr>
<td> `+ details[2].CustomerName + ` </td>
<td>`+ details[2].Items.Product1 + `<br>` + details[2].Items.Product2 + `<br>` + details[1].Items.Product3 + `</td>
<td> Rs.`+ details[2].TotalAmount + ` </td>
</tr>
</table>
`;
</script>
</body>
</html>
下圖顯示了上述示例的輸出，其中我們建立了一個巢狀在物件中的 JSON 物件。當用戶在瀏覽器上載入示例時，他將獲得一個表格，其中包含我們直接訪問的 JSON 物件中的值。
結論
JSON 物件的此過濾器功能用於從 API 中過濾資料。正如我們透過訪問鍵在 script 標籤中顯示了預定義的值一樣。因此，在上述示例的升級中，我們還可以建立一個搜尋欄，使用者可以在該欄中鍵入值，並在結果中在螢幕上獲得輸出。
623 次檢視
