数据结构
网络
关系数据库管理系统 (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+ 浏览量
