如何在 JavaScript 中根据字段值过滤对象?
概述
JavaScript 中的对象定义为一组键值对。它用于定义单个对象的属性。因此，可以使用 JavaScript 根据字段值过滤对象。通过使用 if-else 条件，我们可以根据值过滤对象。因此，要从对象中进行过滤，首先我们要访问对象的键，因此为此我们应该对对象及其操作有一些先验知识。因为对象的操作在过滤对象的字段值中起着重要作用。
语法
使用值过滤对象的语法如下所示。
array.filter((p) => {
if (p.field == fieldValue) {
newArray.push(p)
}
})
array − 上述语法中的数组被称为对象的集合。
filter() − 过滤器是一种 JavaScript 方法，它将数组作为过滤器的输入，并根据某些条件过滤元素。
p − "p"是传递给过滤函数的引用参数。
p.field − 使用它可以访问名为"p"的对象中的任何字段。
fieldValue − 在上面的语法中，"fieldValue"被称为我们必须在 JavaScript 对象中找到的值。
newArray − 它是由过滤对象组成的数组的引用。
push() − 它是数组的 JavaScript 方法，用于将元素插入数组中。 push() 方法将元素插入到数组的最后。
算法
步骤 1 - 在文本编辑器上创建一个 HTML 文件，并向文件添加 HTML 样板。
步骤 2 - 现在创建一个父 div 容器，其中包含从对象呈现的键值。
步骤 3 - 现在将一个输入标签添加到类型为文本的容器中，其 id 属性名称为"inpVal"。
<input type="text" placeholder="Filter by brand" id="inpVal">
步骤 4 - 现在添加一个 HTML 按钮，其 onclick 事件处理程序为"fil()"。
<button onclick="fil()">Filter</button>
步骤 5 - 现在将一个 HTML 表添加到 div 容器，其 <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></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 − 将输入标签的值存储在引用变量中。
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 - 创建一个空数组。
varfilteredArray = [];
步骤 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 输入标签以根据字段的值过滤给定的对象。
<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>
下图显示了上述功能在不同阶段的输出。因此，在第一张图片中，它显示了网页的简单布局，其中包含一个搜索框，用于按值过滤对象，以及一个表，该表是将被过滤的对象的数据。因此，当用户在搜索字段中输入品牌名称并点击过滤按钮时。用户将根据其值从对象中获取所有过滤后的行。如第二张和第三张图片所示，我们可以看到，当用户输入品牌值"三星"或"AMD"时，他会以新表的形式获得过滤后的数据。
在最后一张图片中，我们可以看到，当用户在搜索字段中输入不在对象中的值时，用户将获得"未找到结果"的输出。
结论
此功能由电子商务 Web 应用程序使用，这些应用程序根据用户输入的一些条件(例如评级、定价或产品质量)过滤其数据。我们还可以在联系人管理系统或员工管理系统中使用此功能来过滤详细信息。这可以集成以过滤来自实时 API 的数据。
