如何使用 JavaScript 过滤嵌套的 JSON 对象以返回特定值?

javascriptjsonweb developmentfront end technology

概述

JavaScript 中的对象是一组包含在键值对形式的花括号内的数据。JavaScript 中的对象是通过使用花括号并在其中定义数据集来创建的。嵌套的 JSON 对象也是一组键值对，但在嵌套中，键包含一组继承自其中的对象。我们可以使用两种格式访问 JSON 对象中的值:第一种方法是直接访问值，第二种方法是使用 filter() 方法。 filter() 方法返回一个值，该值对于在 filter() 方法中作为回调函数传递的条件为真。

语法

直接从对象访问值的语法是。

在数组内创建嵌套 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>

步骤 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 对象的值。