数组过滤器工作起来像一个标记过滤器
数组过滤器工作起来像一个标记过滤器
提问于 2022-07-13 12:21:06
我需要让过滤器工作像一个市场过滤器，如果一个设置的品牌，我只会看到品牌相关的事项，如果我为这个品牌设置状态，只有我的品牌与我的预设状态。
实例：
partners = [
0:{
ano: "2022"
badge_status: "badge-success"
data_venda: "01/07/2022"
item_venda: "OATMEAL STOUT - Mark The Shadow"
mes: "JULHO"
parceiro: "BASTARDS"
qtd_itens: 1
status: "CONCLUIDA" // **true**
valor_pago: 1
},
1:{
ano: "2022"
badge_status: "badge-danger"
data_venda: "04/07/2022"
item_venda: "IPA - Hector 5 Rounds"
mes: "JULHO"
parceiro: "BASTARDS"
qtd_itens: 1
status: "Houve algum erro no pagamento" // **false**
valor_pago: 4
},
2:{
ano: "2022"
badge_status: "badge-success"
data_venda: "04/07/2022"
item_venda: "IPA - Hector 5 Rounds"
mes: "JULHO"
parceiro: "BASTARDS"
qtd_itens: 3
status: "CONCLUIDA" // **true**
valor_pago: 3
}
]这是我的DB数组，我需要过滤'item_venda‘和/或’状态‘。所选的每个item_venda，都需要像下面的索引图像那样返回数组
this.filtered2 = function(filtering){
// console.clear()
let filterInput = this.search
let filters = [...this.search].filter(input=> input.value).map(input => ({
filter: input.name,
value: input.value
}))
console.log('Itens a procurar', filters)
return filtrada.filter(produto => {
console.log('PRODUTO', produto)
return filters.every(filter =>{
console.log("Filter", filter)
return produto[filter.filter] == filter.value
})
})我的第一个筛选器将选择年份、月份和合作伙伴：
因此，在我的新数组中，我将只获得选定合作伙伴的产品，即sell月份和年份。
现在由于这个问题，我希望再次筛选，只在我的列表中看到选定的产品，如果设置了一个状态(已售出/未售出)，则只返回筛选过的产品，所选的状态将像一个市场数组一样工作，当选择一个品牌、一个价格范围、长度.
实际上，对于@ item_venda提示，如果选择了第一个，则返回经过筛选的数组，但是当选择第二个.item_venda，只返回[]。
THIS.SEARCH将为HTML上的每个选择接收值。
仅使用item_venda过滤器1：https://i.stack.imgur.com/1E9sn.png的表图像
回答 1
Stack Overflow用户
发布于 2022-07-13 12:51:15
注意:代码是完全可修饰的，您可以添加/删除您(不需要)的过滤器;)
假设您有一个表示产品的array of object，您可以使用以下代码使用html选择对其进行筛选：
联署材料：
const products = [
{
productName: 'product 1',
partner: 'partner 1',
status: true,
},
{
productName: 'product 2',
partner: 'partner 1',
status: true,
},
{
productName: 'product 1',
partner: 'partner 2',
status: false,
},
];
let filterProducts = function(products) {
let filterInputs = document.querySelectorAll('.filter');
let filters = [...filterInputs].filter(input => input.value).map(input => ({filter: input.name, value: input.value}));
return products.filter(product => {
return filters.every(filter => {
return product[filter.filter] == filter.value;
});
});
}
document.querySelector('#searchBtn').addEventListener('click', e => {
let result = filterProducts(products);
console.log(result);
});HTML：
<select name="productName" class="filter">
<option value="">-----</option>
<option value="product 1">product 1</option>
<option value="product 2">product 2</option>
</select>
<select name="partner" class="filter">
<option value="">-----</option>
<option value="partner 1">partner 1</option>
<option value="partner 2">partner 2</option>
</select>
<select name="status" class="filter">
<option value="">-----</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<button type="button" id="searchBtn">Search</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72966210
复制相关文章
相似问题
腾讯云开发者
