#reactjs #checkbox #filter
#reactjs #флажок #Фильтр
Вопрос:
У меня есть массив, в котором я храню идентификаторы объектов. Я перебираю все объекты, чтобы найти те, которые содержат идентификаторы из массива. Если я установлю несколько флажков, я получу каждый объект, содержащий любой идентификатор из массива. Но цель состоит в том, чтобы получить только те объекты, которые содержат все выбранные значения.
мой код:
this.state.filterSelected: ["231", "232", "130"]
data = [
{
title: 'title one'
id: ['130', '231', '232']
}
{
title: 'title two'
id: ['130', '231', '232', '233']
}
{
title: 'title three'
id: ['130', '231']
}
]
const checkbox = () => {
let base = [];
for (let i = 0; i < this.state.filterSelected.length; i ) {
let foo = data.filter(article =>
article[property]
? article[property].includes(this.state.filterSelected[i])
: null
);
base.push(foo);
}
let uniqueObj = [...new Map(base.flat().map(o => [o.id, o])).values()];
this.setState({ print: uniqueObj });
};
Я хочу получить объект только с ‘title one’ и ‘title two’, который содержит все выбранные фильтры.
последнее обновление:
if(e.target.getAttribute('vocabulary') === 'tags'){
property = 'tags_array';
}
if(e.target.getAttribute('vocabulary') === 'type'){
property = 'types_array';
}
if(e.target.getAttribute('vocabulary') === 'related'){
property = 'related_to_array';
}
Комментарии:
1. Не могли бы вы опубликовать пример ввода и желаемый результат?
2. вы правы, я уже отредактировал свой пост
Ответ №1:
Вы можете использовать every
функцию внутри вашего filter
, чтобы проверить, возвращает ли каждый отдельный элемент массива true
значение.
Вы должны применить его к this.state.filterSelected
, а затем добавить includes
внутри него.
Рабочий пример :
const filter = ["231", "232", "130"]
const data = [
{
title: 'title one',
id: ['130', '231', '232']
},
{
title: 'title two',
id: ['130', '231', '232', '233']
},
{
title: 'title three',
id: ['130', '231']
}
]
const res = data.filter(({ id }) => filter.every(i => id.includes(i)))
console.log(res)
Если имя вашего свойства динамическое, вы можете изменить деконструкцию в filter
на :
data.filter(({ [property]: id }) => filter.every(i => id.includes(i)))
Комментарии:
1. да, это определенно полезно. Мне это действительно нужно, но есть одна вещь. в моем случае ключ id является динамическим, вот почему я использую article[свойство] Я обновил свой первый пост, чтобы вы могли увидеть свойство