数据结构
网络
关系数据库管理系统
操作系统
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 次查看
