在同一数据javascript上应用多个过滤器

时间:2018-04-17 11:06:26

标签: javascript

我从json文件中读取了大量数据。

我需要实现一些过滤器,这些过滤器将根据检查的过滤器返回正确的数据。

我正在使用react和redux以及 - 而studyData来自复选框或下拉列表。

过滤这些过滤器的最佳方法是什么,以便它们能很好地协同工作?

目前他们单独工作但在彼此使用时会中断。

这是我的代码:

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;
}

1 个答案:

答案 0 :(得分:0)

我不确定我是否理解你。

但无论如何,乍一看,我认为你的上一个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;
}
  

注意:显然,那些"如果" s可以合并为一个(他们执行"或")。我尽量提供一个尽可能接近的例子   你的原始代码,但事实上,这种方式会更多   无论如何都可读......