如何根据过滤器过滤javasciptarray object

Question

Based on the filter object, I need to filter out the data. Below is the filter object and sample data with required output. The filter object is generated dynamically via a multi search component from ui. Then when the user hits search the data needs to be filtered.

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",
    "version": "VA48A",
    "sysid1": "CT67399",
    "type": "CompressedFile",
    "rowIndex": 1,
    "selected": false,
    "disabled": true
  },
  {
    "city": "Sarasota",
    "hospname": "Sarasota Memorial Hospital",
    "version": "VA44A",
    "sysid1": "C7393",
    "type": "CompressedFile",
    "rowIndex": 2,
    "selected": false,
    "disabled": true
  },
  {
    "city": "DAVENPORT",
    "hospname": "Genesis Medical Center",
    "version": "VA48A",
    "sysid1": "C6333",
    "type": "CompressedFile",
    "rowIndex": 6,
    "selected": false,
    "disabled": true
  }
];

Expected output:

[{
    "city": "Panama City",
    "hospname": "Bay Medical Center",
    "version": "VA48A",
    "sysid1": "CT67399",
    "type": "CompressedFile",
    "rowIndex": 1,
    "selected": false,
    "disabled": true
  },
  {
    "city": "Sarasota",
    "hospname": "Sarasota Memorial Hospital",
    "version": "VA44A",
    "sysid1": "CT67393",
    "type": "CompressedFile",
    "rowIndex": 2,
    "selected": false,
    "disabled": true
  }]

Answer 1

 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", "version": "VA48A", "sysid1": "CT67399", "type": "CompressedFile", "rowIndex": 1, "selected": false, "disabled": true }, { "city": "Sarasota", "hospname": "Sarasota Memorial Hospital", "version": "VA44A", "sysid1": "C7393", "type": "CompressedFile", "rowIndex": 2, "selected": false, "disabled": true }, { "city": "DAVENPORT", "hospname": "Genesis Medical Center", "version": "VA48A", "sysid1": "C6333", "type": "CompressedFile", "rowIndex": 6, "selected": false, "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; }

Answer 2

In ES6 you can do it like this

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

Happy coding!

Answer 3

I started on a more generic version where you can add attributes on the filter object.

 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", "version": "VA48A", "sysid1": "CT67399", "type": "CompressedFile", "rowIndex": 1, "selected": false, "disabled": true }, { "city": "Sarasota", "hospname": "Sarasota Memorial Hospital", "version": "VA44A", "sysid1": "C7393", "type": "CompressedFile", "rowIndex": 2, "selected": false, "disabled": true }, { "city": "DAVENPORT", "hospname": "Genesis Medical Center", "version": "VA48A", "sysid1": "C6333", "type": "CompressedFile", "rowIndex": 6, "selected": false, "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);