如何在 JavaScript 中过滤嵌套对象?

javascriptweb developmentfront end technology

概述

JavaScript 中的嵌套对象是括在花括号内的简单对象，而要使嵌套对象成为对象，则需要继承其自己的对象。因此，为了在 JavaScript 中过滤对象，JavaScript 提供了自己的方法"filter()"，此 filter() 方法将参数作为回调函数，其中返回一个条件，在该条件下将过滤给定的数组对象。因此，为了实现此过滤任务，我们必须创建一个简单的对象，就像在其他编程语言中创建的那样，然后我们将继承对象中的一些键值作为嵌套值，从而形成嵌套对象。

语法

使用 filter() 方法的基本语法如下所示。在给定的语法中，"objectName"将被替换为您要创建的对象的名称，并返回过滤器的条件，在该条件下您想要过滤给定的嵌套对象。

objectName.filter(function(){
    return condition;
});

算法

步骤 1 - 在文本编辑器中创建一个 HTML 文件，文件名为"index.html"，将 HTML 样板添加到索引文件。
步骤 2 - 现在在 body 标签中创建一个父 div 容器，id 名称为"Output"。

<div id="Output"> </div>

步骤 3 − 现在在正文的结束标记之前添加脚本标记。

<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 方法过滤嵌套对象并将其存储到变量中。

varfilteredObj = myObj.filter(function (item) {
});

步骤 7 − 返回必须过滤数据的条件。

varfilteredObj = 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、名称、价格以及嵌套的 mrp 价格和折扣价格以及产品说明。因此，在此示例中，我们的主要任务是使用 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"存储在变量中。使用过滤器，这个 myObj 将被过滤，因为我们在价格键值中取了两个价格，即"MRP_Price"和"Discount_Price"，所以在过滤器返回中，我们设置了条件，只过滤折扣价格大于等于 (>=) 50000 的数据。因此，对象将只过滤产品 3 和产品 4，因为它们的折扣价格大于 50000。这些数据将以表格的形式显示。

结论

如上例所示，我们以表格形式显示了过滤后的数据，我们也可以在不使用表格的情况下，通过在控制台中显示数据来显示数据。但在将数据显示到控制台之前，您应该将数据转换为字符串，因为数据是对象的形式。我们可以使用 (JSON.stringify(filteredObjName)) 将数据对象转换为字符串，这是 JSON 等对象的字符串化方法。这种对象过滤用于联系人、电子商务等应用程序。电子商务使用过滤器根据评级、价格对产品进行排序。