javascript - How can I another filter for score which will show the results matching the range?

Question

I wanted to add another filter for score with the options as Very High, High, Medium and Low. If the score is <20 then low, 21-50 then medium, 51-70 then high and >71 then very high it should filter records matching that range.

Can you guide me what do I need to update in my filter. filter.pipe

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "tableFilter"
})
export class TableFilterPipe implements PipeTransform {
  transform(list: any[], filters: any) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = (user: { [x: string]: any }) =>
      keys.every(key => {
        if (key == "sdob") {
          return (
            new Date(user["dob"]) >= new Date(new Date(filters[key]).setHours(0, 0, 0, 0))
          );
        } else if (key == "edob") {
          return (
            new Date(new Date(filters[key]).setHours(0, 0, 0, 0)) >= new Date(user["dob"])
          );
        } else if (key === "dl" && user["assigned_to"].filter((e: { dl: any; }) => e.dl === filters[key]).length) {
          return user;
        }
        else if (key == "score") {
          
        }
        else {
          return user[key] === filters[key];
        }
      });
    return keys.length ? list.filter(filterUser) : list;
  }
}

HTML/Template

<div class="form-group float-left mr-4">
          <strong>Score</strong>
          <br />
          <select class="form-control form-control-sm" name="score" ngModel [ngModelOptions]="{updateOn: 'submit'}">
            <option></option>
            <option value="">Low</option>
            <option value="">Medium</option>
            <option value="">High</option>
            <option value="">Very High</option>
          </select>
        </div>

Live: https://stackblitz.com/edit/angular-ivy-1tsz1r?file=src%2Fapp%2Fapp.component.html

Please help.

Answer 1

Add one more else if to your code:

else if (key === "score") {
      const low = filters[key] === "20" && user["score"] <= filters[key];
      const medium =
        filters[key] === "50" && user["score"] < 50 && user["score"] >= 21;
      const high =
        filters[key] === "70" && user["score"] < 70 && user["score"] >= 51;
      const veryHigh = filters[key] === "71" && user["score"] >= 71;
      if (low || medium || high || veryHigh) {
        return user;
      }
    } 

Also, send values from HTML:

<option value="71">Very High</option>
      <option value="70">High</option>
      <option value="50">Medium</option>
      <option value="20">Low</option>

https://angular-ivy-xtgnv5.stackblitz.io Also, please mark as right, if your problems gets solved.