如何根据过滤器对象过滤javasciptarray

问题描述

基于过滤器对象,我需要过滤掉数据。以下是具有所需输出的过滤器对象和示例数据。过滤器对象是通过 ui 中的多搜索组件动态生成的。然后当用户点击搜索时需要过滤数据。

var filter = {
  city: 'pana',hospname: 'Sara'
};
var data = [
  {
    "city": "Hot Springs","hospname": "St. vincent Hot Springs","version": "VA48A","sysid1": "CT67400","type": "CompressedFile","rowIndex": 0,"selected": false,"disabled": true
  },{
    "city": "Panama City","hospname": "Bay Medical Center","sysid1": "CT67399","rowIndex": 1,{
    "city": "Sarasota","hospname": "Sarasota Memorial Hospital","version": "VA44A","sysid1": "C7393","rowIndex": 2,{
    "city": "DAVENPORT","hospname": "Genesis Medical Center","sysid1": "C6333","rowIndex": 6,"disabled": true
  }
];

预期输出

[{
    "city": "Panama City","sysid1": "CT67393","disabled": true
  }]

解决方法

var filter = {
  city: 'pana',hospname: 'sara'
};
var data = [
  {
    "city": "Hot Springs","hospname": "St. Vincent Hot Springs","version": "VA48A","sysid1": "CT67400","type": "CompressedFile","rowIndex": 0,"selected": false,"disabled": true
  },{
    "city": "Panama City","hospname": "Bay Medical Center","sysid1": "CT67399","rowIndex": 1,{
    "city": "Sarasota","hospname": "Sarasota Memorial Hospital","version": "VA44A","sysid1": "C7393","rowIndex": 2,{
    "city": "DAVENPORT","hospname": "Genesis Medical Center","sysid1": "C6333","rowIndex": 6,"disabled": true
  }
];

const result=data.filter(item=>item.city.toLowerCase().includes(filter.city.toLowerCase()) || item.hospname.toLowerCase().includes(filter.hospname.toLowerCase()) )

console.log(result)
.as-console-wrapper { max-height: 100% !important; top: 0; }

,

我开始使用更通用的版本,您可以在其中为过滤器对象添加属性。

var filter = {
  city: 'pana',"disabled": true
  }
];

let results;

if (Object.keys(filter).length === 0)
  results = data;
else {
  results = data.filter((item) => {
      return Object.keys(filter).find(key => {
          return item[key] && item[key].toLowerCase().includes(filter[key].toLowerCase());
      });
  });  
}

console.log(results);

,

在 ES6 中你可以这样做

var results = data.filter(function(item)=>{
   return item.city === filter.city || item.hospname === filter.hospname;
});

快乐编码!