The array of objects:

array = [
    {
        "id": 1,
        "key": "key1",
        "name": "name1",
        "area": "area1",
        "functionalArea": "func1",
        "lob": "lob1",
    },
{
        "id": 2,
        "key": "key2",
        "name": "name2",
        "area": "ALL",
        "functionalArea": "ALL",
        "lob": "ALL",
    },
]

My atempt:

const { name, id, functionalArea, area, lob } = this.form.getRawValue();
    const searchTerms = {
      widgetName,
      widgetId,
      functionalArea,
      area,
      lob,
    };

.subscribe(
        (res) => {
          let results = array.filter((item) =>
          searchTerms.functionalArea === 'ALL' &&
          searchTerms.area === 'ALL' &&
          searchTerms.lob === 'ALL' &&
          !searchTerms.id &&
          !searchTerms.name
            ? item
            : item.key.toLowerCase().includes(searchTerms.widgetId.toLowerCase()) ||
              item.name.toLowerCase().includes(searchTerms.widgetName.toLowerCase()) ||
              (item.functionalArea.toLowerCase().includes(searchTerms.functionalArea.toLowerCase()) &&
                item.area.toLowerCase().includes(searchTerms.area.toLowerCase()) &&
                item.lob.toLowerCase().includes(searchTerms.lob.toLowerCase()))
          );
        },
    

The problem: I cannot filter for multiple conditions using includes() function, it does not work. If i remove all conditions and use only one than the includes() function works.

CodePudding user response：

A filter is a function that return true or false, As always you want to "search" is good at first convert to upperCase (or lowerCase) the "condition"

searchTerms.functionalArea=searchTerms.functionalArea?
                           searchTerms.functionalArea.toLowerCase():'ALL'
searchTerms.area =searchTerms.functionalArea?
                           searchTerms.area.toLowerCase():'ALL'
searchTerms.lob =searchTerms.functionalArea?
                           searchTerms.lob.toLowerCase():'ALL'
searchTerms.name=searchTerms.name?
                           searchTerms.name.toLowerCase():'ALL'

const result=array.filter((item)=>{ //<--see this bracket

     let result=searchTerms.functionalArea=='ALL' || 
                searchTerms.functionalArea.includes(item.functionalArea.toLowerCase());

     result=result && (searchTerms.area =='ALL' || 
                       searchTerms.area.includes(item.area .toLowerCase());)

     result=result && (searchTerms.lob =='ALL' || 
                       searchTerms.lob.includes(item.lob .toLowerCase());)

     //Update

     result=result && (!searchTerms.widgetId || 
                          searchTerms.widgetId==item.id)

     result=result && (!searchTerms.widgetName || 
                       searchTerms.widgetName.includes(item.name.toLowerCase());)

     return result; //<--as you use bracket, you should use return
})

CodePudding user response：

You have to filter only if the conditions about searchTerm are true, something like this:

let results = (searchTerms.functionalArea === 'ALL' &&
                searchTerms.area === 'ALL' &&
                searchTerms.lob === 'ALL' &&
                !searchTerms.id &&
                !searchTerms.name) 
            ? array 
            : array.filter((item) => item.key.toLowerCase().includes(searchTerms.widgetId.toLowerCase()) ||
            item.name.toLowerCase().includes(searchTerms.widgetName.toLowerCase()) ||
            (item.functionalArea.toLowerCase().includes(searchTerms.functionalArea.toLowerCase()) &&
              item.area.toLowerCase().includes(searchTerms.area.toLowerCase()) &&
              item.lob.toLowerCase().includes(searchTerms.lob.toLowerCase())));

EXAMPLE (check the console output): https://stackblitz.com/edit/typescript-y2w6sr?file=index.ts