資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 JavaScript 中過濾巢狀物件？
概述
JavaScript 中的巢狀物件是一個用花括號括起來的簡單物件，要使巢狀物件成為一個物件，它需要繼承它自己的物件。因此，要在 JavaScript 中過濾物件，JavaScript 提供了自己的方法，名為“filter()”，此 filter() 方法將引數作為回撥函式，其中返回一個條件，在此條件下將過濾給定的陣列物件。因此，為了完成此過濾任務，我們將必須像在其他程式語言中一樣建立一個簡單的物件，然後我們將繼承物件中的一些鍵值作為巢狀值，這將構成一個巢狀物件。
語法
下面顯示了使用 filter() 方法的基本語法。在給定的語法中，“objectName”將被替換為您將建立的物件的名稱，並在您希望過濾給定巢狀物件的條件下返回該條件。
objectName.filter(function(){
return condition;
});
演算法
步驟 1 - 在您的文字編輯器中建立一個 HTML 檔案，檔名“index.html”，將 HTML 基本結構新增到 index 檔案中。
步驟 2 - 現在在 body 標記中建立一個父 div 容器，其 id 名稱設定為“Output”。
<div id="Output"> </div>
步驟 3 - 現在在 body 的結束標記之前新增 script 標記。
<script></script>
步驟 4 - 建立一個空的陣列變數。
var myObj = [];
步驟 5 - 現在將具有巢狀物件的物件資料新增到上面建立的變數中。
var myObj = [
{
product_id: 1,
product_name: " product1 ",
product_price:{
MRP_Price:50000,
Discount_Price:48000
},
product_description: "Product description for product 1. Do not take this description for the above product."
},
{
product_id: 2,
product_name: " product2 ",
product_price:{
MRP_Price:40000,
Discount_Price:38000
},
product_description: "Product description for product 2. Do not take this description for the above product."
},
{
product_id: 3,
product_name: " product3 ",
product_price:{
MRP_Price:60000,
Discount_Price:58000
},
product_description: "Product description for product 3. Do not take this description for the above product."
},
{
product_id: 4,
product_name: " product4 ",
product_price:{
MRP_Price:52000,
Discount_Price:50000
},
product_description: "Product description for product 4. Do not take this description for the above product."
}
];
步驟 6 - 現在使用 filter 方法過濾巢狀物件並將其儲存到變數中。
var filteredObj = myObj.filter(function (item) {
});
步驟 7 - 返回您必須過濾資料的條件。
var filteredObj = myObj.filter(function (item) {
return item.product_price.Discount_Price >= 50000;
});
步驟 8 - 現在過濾後的資料以物件的格式儲存在變數中。
步驟 9 - 使用 HTML 表格以表格形式顯示過濾後的資料。
var productTable = "";
filteredObj.forEach(function (item) {
productTable += `
<table border="2" align="center" style="margin:1rem 0; text-align:center;">
<tr>
<th>Id</th>
<th>Name</th>
<th>MRP Price</th>
<th>Discounted Price</th>
<th>Description</th>
</tr>
<tr>
<td>`+ item.product_id + `</td>
<td>`+ item.product_name + `</td>
<td>`+ item.product_price.MRP_Price + `</td>
<td>`+ item.product_price.Discount_Price + `</td>
<td>`+ item.product_description + `</td>
</tr>
</table>`
});
document.getElementById("Output").innerHTML = productTable;
步驟 10 - 過濾後的資料顯示在瀏覽器中。
示例
在此示例中，我們將建立產品 ID、名稱、價格的巢狀物件資料，以及巢狀的建議零售價和折扣價以及產品描述。因此，在此示例中，我們的主要任務是使用 filter() 方法過濾資料，我們將在 filter 返回值中設定物件將在其上進行過濾的條件，並且在過濾資料後，我們將以表格形式顯示資料，以便使用者可以輕鬆地分析來自巢狀物件資料的過濾資料。
<html>
<head>
<title> filter nested objects </title>
</head>
<body>
<h3> Filtered nested objects using filter() method </h3>
<div id="Output"> </div>
<script>
var myObj = [
{
product_id: 1,
product_name: "product1",
product_price:{
MRP_Price:50000,
Discount_Price:48000
},
product_description: "Product description for the product. Do not take this description for the above product."
},
{
product_id: 2,
product_name: "product2",
product_price:{
MRP_Price:40000,
Discount_Price:38000
},
product_description: "Product description for the product. Do not take this description for the above product."
},
{
product_id: 3,
product_name: "product3",
product_price:{
MRP_Price:60000,
Discount_Price:58000
},
product_description: "Product description for the product. Do not take this description for the above product."
},
{
product_id: 4,
product_name: "product4",
product_price:{
MRP_Price:52000,
Discount_Price:50000
},
product_description: "Product description for the product. Do not take this description for the above product."
}
];
var filteredObj = myObj.filter(function (item) {
return item.product_price.Discount_Price >= 50000;
});
var productTable = "";
filteredObj.forEach(function (item) {
productTable += `
<table border="2" align="center" style="margin:1rem 0; text-align:center;">
<tr>
<th>Id</th>
<th>Name</th>
<th>MRP Price</th>
<th>Discounted Price</th>
<th>Description</th>
</tr>
<tr>
<td>`+ item.product_id + `</td>
<td>`+ item.product_name + `</td>
<td>`+ item.product_price.MRP_Price + `</td>
<td>`+ item.product_price.Discount_Price + `</td>
<td>`+ item.product_description + `</td>
</tr>
</table>`
});
document.getElementById("Output").innerHTML = productTable;
</script>
</body>
</html>
下圖顯示了上述示例的輸出，當我們載入上述示例時，物件列表也將被載入並存儲在變數“myObj”中。使用 filter，此 myObj 將被過濾，因為我們在 price 鍵值中使用了兩個價格“MRP_Price”和“Discount_Price”，因此在 filter 返回中，我們設定了條件，只過濾折扣價大於等於（>=）50000 的資料。因此，該物件將僅過濾產品 3 和產品 4，因為它們的折扣價大於 50000。這些資料將以表格形式顯示。
結論
如上例所示，我們將過濾後的資料以表格形式顯示，我們也可以在不使用表格的情況下簡單地將其顯示在控制檯中。但在將資料顯示到控制檯之前，您應該將資料轉換為字串，因為資料是物件形式的。我們可以使用 (JSON.stringify(filteredObjName)) 將資料物件轉換為字串，這是 JSON 之類的物件的 stringify 方法。這種物件的過濾應用於聯絡人、電子商務等許多應用程式。電子商務使用過濾器根據評分、價格對產品進行排序。
2K+ 瀏覽量
