Применение нескольких фильтров к одним и тем же данным javascript
У меня есть куча данных, которые я читаю из файла json.
Мне нужно реализовать некоторые фильтры, которые будут возвращать правильные данные в зависимости от того, какие фильтры проверены.
Я использую реакцию и сокращение, и - и данные исследования поступают либо из флажков, либо из раскрывающихся списков.
Как лучше всего фильтровать фильтры, чтобы они хорошо работали вместе?
На данный момент они работают индивидуально, но ломаются, когда вы используете их друг с другом.
Вот мой код:
function filterStudies(studyData){
let searchTerm = studyData.searchTerm === undefined ? '' : studyData.searchTerm;
let studies = studyData.studies.filter((val)=> val.name.toUpperCase().includes(searchTerm.toUpperCase()));
if (typeof(studyData.isLive) !== 'undefined'){
studies = studyData.isLive ? studies.filter((val) => val.live === studyData.isLive) : studyData.studies;
}
if (typeof(studyData.isCompleted) !== 'undefined'){
studies = studyData.isCompleted ? studies.filter((val) => val.completed === studyData.isCompleted) : studyData.studies;
}
if (typeof(studyData.media) !== 'undefined'){
studies = studyData.media === 'All' ? studyData.studies : studies.filter((val) => val.media === studyData.media);
}
if (typeof(studyData.environment) !== 'undefined'){
studies = studyData.media === 'All' ? studyData.studies : studies.filter((val) => val.environment === studyData.environment);
}
return studies;
}
Вы всегда переопределяете studies = ...
Мне просто нужно вернуть новый массив studyData, в котором применены все фильтры.
в основном, как заставить фильтры работать вместе, а не по отдельности.
Это зависит от того, хотите ли вы, чтобы ваши фильтры были ИЛИ или И. Если вы проверите isCompleted и media, хотите ли вы исследования с isCompleted AND media или isCompleted OR media? В настоящее время это И.
@JeremyThille Все исследования будут иметь набор свойств, связанных с ними, например, одним из средств исследования будет 'TV', а isCompleted может быть 'true'. Когда вы выбираете опцию tv и опцию isCompleted, мне нужно применить оба этих фильтра к данным. Так что, я думаю, мне нужно И?
В этом случае нет причин, по которым предоставленный вами код не должен работать. Что значит it breaks? Это вылетает? Что происходит?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не уверен, хорошо ли я вас понял.
Но в любом случае, на первый взгляд, я думаю, что ваш последний if должен быть:
if (typeof(studyData.environment) !== 'undefined'){
studies = studyData.environment === 'All' ? studyData.studies : studies.filter((val) => val.environment === studyData.environment);
}
вместо:
if (typeof(studyData.environment) !== 'undefined'){
studies = studyData.media === 'All' ? studyData.studies : studies.filter((val) => val.environment === studyData.environment);
}
Кстати, я бы предложил упростить ваш код, полагаясь на один фильтр, который решает, какие элементы следует сохранить, а какие - отбросить.
Просто в качестве примера (я Не понимаю, что именно делает вид, что выполняет ваш код, поэтому мой вряд ли это сделает), но я надеюсь, что это может служить примером:
function filterStudies(studyData){
let searchTerm = studyData.searchTerm === undefined ? '' : studyData.searchTerm;
let studies = studyData.studies.filter(function(val) {
if (val.name.toUpperCase().includes(searchTerm.toUpperCase())) return true;
if (val.live === studyData.isLive) return true;
if (val.completed === studyData.isCompleted) return true;
if (studyData.media === 'All' || val.media === studyData.media) return true;
if (studyData.environment === 'All' || val.environment === studyData.environment) return true;
return false;
});
return studies;
}
NOTE: Obviously those "if"s could be combined in single one (they perform an "or"). I tried to provide an example as close as possible to your original code but, in fact, this way would be quite more readable anyway...
Хм, исследования - это массив, который мне нужно вернуть - в основном он возвращает отфильтрованные данные для таблицы
вы хотите минимизировать свой код или что-то еще? Это было не совсем понятно из вашего вопроса