In typescript the filtering the array is not working

Question

filtervalue = {
serviceLine:['cca','ga']
}

this.inProgresDetailsData = [{serviceLine:'cca'}, { serviceLine:'cca'}, { serviceLine:'bca'}]
this.hrResourceDetailsdata= this.inProgresDetailsData.filter(item => {
          for (let index = 0; index < filterValue.serviceLine.length; index++) {
            item.serviceLine == filterValue.serviceLine[index]
          }
        });`

this.hrResourceDetailsdata is empty on filtering

Answer 1

The Array.prototype.filter (documentation) function expects you to return a boolean value that decides whether to keep the current item or not.

Since you are originally not returning any value, you implicitly return undefined which when checked against a boolean resolves to false, hence, all of your array items are discarded one by one, leaving none remaining.

You want to return the boolean to make this work:

this.hrResourceDetailsdata = this.inProgresDetailsData.filter(item => {
  for (let index = 0; index < filterValue.serviceLine.length; index++) {
    if (item.serviceLine == filterValue.serviceLine[index]) {
      return true; // return true if found, otherwise continue
    }
  }
  return false; // filter is never found in loop, fall back to false
});

Also, you can use Array.prototype.includes (documentation) to simplify your check, the following code does the exact same thing:

this.hrResourceDetailsdata = this.inProgresDetailsData.filter(item => {
  // return true if `item.serviceLine` is inside `filterValue.serviceLine`
  return filterValue.serviceLine.includes(item.serviceLine);
});

Answer 2

You can create a Set out of filterValue.serviceLine and filter out the items that are present in the set.

const 
  filterValue = { serviceLine: ["cca", "ga"] },
  inProgressDetailsData = [
    { serviceLine: "cca" },
    { serviceLine: "cca" },
    { serviceLine: "bca" },
  ],
  filterSet = new Set(filterValue.serviceLine),
  hrResourceDetailsdata = inProgressDetailsData.filter(({ serviceLine }) =>
    filterSet.has(serviceLine)
  );

console.log(hrResourceDetailsdata);

If you want to apply multiple filters, then:

• Create an object containing filters in form of Sets.
• Filter items where all the filters are applicable using Array.prototype.every.

const 
  filterValue = {
    serviceLine: ["cca", "ga"],
    urgency: ["medium", "high"],
  },
  filterSet = Object.fromEntries(
    Object.entries(filterValue).map(([k, v]) => [k, new Set(v)])
  ),
  inProgressDetailsData = [
    { id: 1, urgency: "low", serviceLine: "cca" },
    { id: 2, urgency: "medium", serviceLine: "cca" },
    { id: 3, urgency: "low", serviceLine: "bca" },
    { id: 4, urgency: "high", serviceLine: "ga" },
    { id: 5, urgency: "low", serviceLine: "abc" },
  ],
  hrResourceDetailsdata = inProgressDetailsData.filter((data) =>
    Object.entries(filterSet).every(([k, v]) => v.has(data[k]))
  );

console.log(hrResourceDetailsdata);

Answer 3

Code

filtervalue = {
    serviceLine:['cca','ga']
};

this.inProgresDetailsData = [
    { serviceLine:'cca'}, 
    { serviceLine:'cca'}, 
    { serviceLine:'bca'}
];
this.hrResourceDetailsdata = this.inProgresDetailsData.filter(item => { 
    return filtervalue.serviceLine.includes(item.serviceLine)
});

console.log(this.hrResourceDetailsdata)