数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 JavaScript 中根据字段值过滤对象？
概述
JavaScript 中的对象定义为一组键值对。它用于定义单个对象的属性。因此，可以使用 JavaScript 根据字段值过滤对象。通过使用 if-else 条件，我们可以根据值过滤对象。因此，要从对象中过滤，我们首先需要访问对象的键，为此，我们应该事先了解对象及其操作。由于对象的操作在过滤对象字段值中起着重要作用。
语法
下面显示了使用值过滤对象的语法。
array.filter((p) => {
if (p.field == fieldValue) {
newArray.push(p)
}
})
数组 - 上述语法中的数组被称为对象的集合。
filter() - 过滤器是一个 JavaScript 方法，它将数组作为输入传递给过滤器，并根据某些条件过滤元素。
p - 'p' 是传递给过滤函数的引用参数。
p.field - 使用此方法，我们可以访问名为 'p' 的对象中的任何字段。
fieldValue - 在上述语法中，'fieldValue' 被称为我们必须在 JavaScript 对象中找到的值。
newArray - 它是数组的引用，其中将包含过滤后的对象。
push() - 它是数组的 JavaScript 方法，用于将元素插入数组中。push() 方法将元素插入数组的末尾。
算法
步骤 1 - 在您的文本编辑器中创建一个 HTML 文件，并将 HTML 基本框架添加到该文件。
步骤 2 - 现在创建一个父 div 容器，其中包含从对象渲染的键值。
步骤 3 - 现在向容器中添加一个类型为文本的 input 标签，其 id 属性名为 "inpVal"。
<input type="text" placeholder="Filter by brand" id="inpVal">
步骤 4 - 现在添加一个 HTML 按钮，其 onclick 事件处理程序为 "fil()"。
<button onclick="fil()">Filter</button>
步骤 5 - 现在向 div 容器中添加一个 HTML 表格，其 <tbody> 属性中的 id 名称为 "ans"。
<table border style="text-align: center;">
<thead>
<th>Id</th>
<th>ProductName</th>
<th>Brand</th>
</thead>
<tbody id="ans"></tbody>
</table>
步骤 6 - 现在为过滤对象的输出创建另一个 div 容器，作为字段值。
步骤 7 - 现在创建一个表格，用于渲染过滤后的对象。
<div>
<table border="" style="text-align: center;">
<thead>
<th>Id</th>
<th>ProductName</th>
<th>Brand</th>
</thead>
<tbody id="ans2">
<td>-</td>
<td>-</td>
<td>-</td>
</tbody>
</table>
</div>
步骤 8 - 现在将 script 标签添加到文件的 body 中。
<script></script>
步骤 9 - 现在创建一个空变量和一个包含对象中一些示例值的数组。
var t = '';
var obj = [
{ ID: 1, ProductName: 'Mobile', brand: 'Samsung' },
{ ID: 2, ProductName: 'Acessories', brand: 'Samsung' },
{ ID: 3, ProductName: 'Processor', brand: 'AMD' },
{ ID: 4, ProductName: 'SSD', brand: 'Samsung' }
];
步骤 10 - 现在使用 for 循环迭代数组，并使用对象访问语法访问对象并将其渲染到表格中。
for (let index = 0; index < obj.length; index++) {
t += `
<tr>
<td>`+ obj[index].ID + `</td>
<td>`+ obj[index].ProductName + `</td>
<td>`+ obj[index].brand + `</td>
</tr>
`
}
步骤 11 - 现在使用 DOM innerHTML 方法将对象键值添加到表格中。
document.getElementById("ans").innerHTML = t;
步骤 12 - 现在创建一个箭头函数作为 file()。
fil = () => {}
步骤 13 - 将 input 标签的值存储在引用变量中。
var f = ``
var iVal = document.getElementById("inpVal").value;
步骤 14 - 现在使用语法从对象中查找过滤后的值。
obj.filter((p) => {
if (p.brand == iVal) {
filteredArray.push(p)
}else{
f="No result found";
}
})
步骤 15 - 创建一个空数组。
var filteredArray = [];
步骤 16 - 现在使用 forEach 显示存储在 filteredArray 中的输出。
filteredArray.forEach(element => {
f += `
<tr>
<td>`+ element.ID + `</td>
<td>`+ element.ProductName + `</td>
<td>`+ element.brand + `</td>
</tr>
`
});
步骤 17 - 使用 HTML DOM 属性将 HTML 数据插入表格。
document.getElementById("ans2").innerHTML = f;
示例
在此示例中，我们将从 JavaScript 对象渲染对象数据到 HTML 表格，还将添加 HTML input 标签以根据字段值过滤给定的对象。
<html>
<head>
<title> filter object depending on field value </title>
</head>
<body>
<div>
<h3> object rendered table (Search is case sensitive) </h3>
<input type="text" placeholder="Filter by brand" id="inpVal">
<button onclick="fil()">Filter</button>
<table border style="text-align: center;">
<thead>
<th>Id</th>
<th>ProductName</th>
<th>Brand</th>
</thead>
<tbody id="ans"></tbody>
</table>
</div>
<hr>
<div>
<h3>Filtered object depending on brand field value</h3>
<table border="" style="text-align: center;">
<thead>
<th>Id</th>
<th>ProductName</th>
<th>Brand</th>
</thead>
<tbody id="ans2">
<td>-</td>
<td>-</td>
<td>-</td>
</tbody>
</table>
</div>
<script>
var t = '';
var obj = [
{ ID: 1, ProductName: 'Mobile', brand: 'Samsung' },
{ ID: 2, ProductName: 'Acessories', brand: 'Samsung' },
{ ID: 3, ProductName: 'Processor', brand: 'AMD' },
{ ID: 4, ProductName: 'SSD', brand: 'Samsung' }
];
for (let index = 0; index < obj.length; index++) {
t += `
<tr>
<td>`+ obj[index].ID + `</td>
<td>`+ obj[index].ProductName + `</td>
<td>`+ obj[index].brand + `</td>
</tr>
`
}
document.getElementById("ans").innerHTML = t;
fil = () => {
var filteredArray = [];
var f = ``
var iVal = document.getElementById("inpVal").value;
obj.filter((p) => {
if (p.brand == iVal) {
filteredArray.push(p)
}else{
f="No result found";
}
})
filteredArray.forEach(element => {
f += `
<tr>
<td>`+ element.ID + `</td>
<td>`+ element.ProductName + `</td>
<td>`+ element.brand + `</td>
</tr>
`
});
document.getElementById("ans2").innerHTML = f;
}
</script>
</body>
</html>
下图显示了上述功能在其不同阶段的输出。因此，在第一张图片中，它显示了网页的简单布局，其中包含一个用于根据值过滤对象的搜索框和一个表格，该表格是将要过滤的对象的数据。因此，当用户在搜索字段中键入品牌名称并点击过滤按钮时。用户会根据其值从对象中获取所有过滤后的行。如第二张和第三张图片所示，当用户在品牌值中输入“Samsung”或“AMD”时，他会在新表格中获得过滤后的数据。
在最后一张图片中，我们可以看到，当用户在搜索字段中输入对象中不存在的值时，用户将获得“未找到结果”的输出。
结论
此功能由电子商务 Web 应用程序使用，这些应用程序根据用户输入作为某些条件（例如产品评级、价格或质量）过滤其数据。我们还可以将此功能用于联系人管理系统或员工管理系统以过滤详细信息。这可以集成到从实时 API 过滤数据中。
357 次浏览
