How to create a multi-filter function to filter out multiple attributes?(如何创建一个多重过滤功能来过滤掉多个属性?)
问题描述
我有一个要过滤的对象数组:
I have an array of objects to be filtered:
[
{
"name": "Apple",
"age": 24,
"model": "Android",
"status": "Under development",
},
{
"name": "Roboto",
"age": 24,
"model": "Apple",
"status": "Running",
},
.
.
.
.
]
我需要使用 JavaScript 的 filter
方法使用多个参数过滤数组.我得到了部分解决方案,但无法获得预期的输出.
I need to filter the array using multiple parameters using JavaScript's filter
method.
I have got a partial solution but could not get the expected output.
过滤器还应该适用于单个属性的多个值.例如,age=54,23
或 model=Android"、Apple"
等.
The filter should also work with multiple values for a single attribute.
E.g., age=54,23
or model="Android","Apple"
etc.
我试图模仿电子商务网站的过滤器的工作方式,我们可以在其中比较产品的所有属性和客户选择的标签,以输出过滤后的产品列表.
I'm trying to mimic the working of filters just like that of an e-commerce site, where we can compare all of a product’s attributes and customer’s chosen tags to output a filtered list of products.
推荐答案
如果您像数据数组中的对象一样格式化过滤条件,但值是可能值的数组,那么您可以使用filter
方法如下:
If you format your filter conditions just like an object in your data array, but with values being arrays of possible values, then you can use the filter
method as follows:
let data = [
{
"name": "Apple",
"age": 24,
"model": "Android",
"status": "Under development",
}, {
"name": "Roboto",
"age": 24,
"model": "Apple",
"status": "Running",
}, {
"name": "Samsung",
"age": 26,
"model": "Blueberry",
"status": "Running",
},
];
let filter = {
"name": ["Roboto", "Ericsson"],
"age": [22, 24, 26],
};
let res = data.filter(obj =>
Object.entries(filter).every(([prop, find]) => find.includes(obj[prop])));
console.log(res);
这篇关于如何创建一个多重过滤功能来过滤掉多个属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何创建一个多重过滤功能来过滤掉多个属性?
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- 失败的 Canvas 360 jquery 插件 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- Fetch API 如何获取响应体? 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01