получение объекта, который содержит только выбранные значения REACT

#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[свойство] Я обновил свой первый пост, чтобы вы могли увидеть свойство