I'm having trouble with one of my filter pipes not displaying any results. Can anyone help me troub

I have recently included a new filter for DL, but it seems that the results are not showing up as expected. Any ideas on what changes I should implement?

<div class="form-group float-left mr-4">
<strong>DL</strong>
<br />
<select class="form-control form-control-sm" name="dl" ngModel [ngModelOptions]="{updateOn: 'submit'}">
<option></option>
<option value="CAT1">CAT1</option>
<option value="CAT2">CAT2</option>
</select>
</div>

table-filter.pipe.ts

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 {
          return user[key] === filters[key];
        }
      });
    return keys.length ? list.filter(filterUser) : list;
  }
}

URL: https://stackblitz.com/edit/angular-ivy-dubf37?file=src%2Fapp%2Fapp.component.html

Answer №1

Include an additional else if statement in your filter logic:

else if (
      key === "dl" &&
      user["assigned_to"].filter(e => e.dl === filters[key]).length
    ) {
      return user;
    } 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I access a nested FormArray in Angular?

I have a situation where I am trying to access the second FormArray inside another FormArray. Here is an excerpt from my component: registrationForm = new FormGroup({ registrations: new FormArray([this.patchRegistrationValues()]) }); patchRegistrati ...

The message shown on items.map stating that parameter 'item' is implicitly assigned the type 'any'

Currently, I am delving into the world of Ionic React with Typescript by developing a basic app for personal use. My current challenge involves dynamically populating an IonSegment from an array. Here is the relevant code snippet: const [items, setItems] ...

Angular unable to find a route for external links

I am attempting to create an external link with an <a href="google.com"></a>, but for some reason it redirects me to localhost:4200/google.com... I'm not sure why this is happening, but I need to eliminate the localhost:4200. Below is the ...

Looking for someone to break down this Typescript code snippet for me

As a Javascript developer, I am currently diving into an unfamiliar TypeScript code block within a project. Here is the code snippet: ViewModel newPropertyAddress = new ViewModel(){name, previousPro = oldValue } ...

Type arguments cannot be accepted in untyped function calls.ts(2347)

My user schema in typescript includes the following interface: interface IUser{ name: string; email: string; password: string; isAdmin: boolean; } Check out the user schema below: const UserSchema = new Schema<IUser>( { name: { type ...

Angular does not automatically cancel a wrapped HTTP Request when unsubscribing

Update: The reason for not using the built-in HttpClient and instead opting to use our own HttpService is because we need to intercept the response. Our custom HttpService wraps the Angular provided HttpClient to apply headers, authorizations, and perform ...

How to manually resolve a type by its string or name in Angular 2

I'm facing a challenge. Is it possible to resolve a component manually with just its name known? Let's say I have a string variable that holds the name of a component, like "UserService". I've been exploring Injector and came across method ...

Sorting JSON arrays in Typescript or Angular with a custom order

Is there a way to properly sort a JSON array in Angular? Here is the array for reference: {"title":"DEASDFS","Id":11}, {"title":"AASDBSC","Id":2}, {"title":"JDADKL","Id":6}, {"title":"MDASDNO","Id":3}, {"title":"GHFASDI","Id":15}, {"title":"HASDFAI","Id": ...

What is the correct way to set the default function parameter as `v => v` in JavaScript?

function customFunction<T, NT extends Record<string, string | number | boolean>>( data: T, normalize?: (data: T) => NT, ) { const normalizedData = normalize ? normalize(data) : {}; return Object.keys(normalizedData); } customFuncti ...

TypeScript Color Definitions in React Native

I'm working on a component that requires users to pass only valid color values using TypeScript type checking in a React Native project. How can I achieve this and which types should I use? const TextBody = ({ color }: {color: //Need This}) => { ...

Can you specify the necessary import statement for CallableContext?

My Google Cloud function is simple and looks like this: import * as functions from 'firebase-functions'; var util = require('util') export const repeat = functions.https.onCall( function (data, context) { console.log(&apo ...

What could be the reason for my provider loading the data twice?

Recently, I have been following a tutorial on building an Ionic app that displays information about National Parks. The data is stored locally and loaded by a Provider in my application. However, I noticed that the data is being loaded twice by the Provide ...

Discovering the power of Angular: Leveraging nativeElement to enhance your click handlers

Perhaps just a "stylish" yet effective solution... Here's what I have that is functional: // Template <div *ngFor="let media of period.media"> . . . <button #btn (click)="onDeleteClick(btn)" [attr.media-id]="media.ID"> ...

What is the best method to terminate an Electron application using TypeScript?

I have been searching for the proper method to close an Electron app. My app uses React and TypeScript. After coming across this helpful post, I discovered a working solution: const remote = require('electron').remote; let w = remote.getCurrentW ...

How can the file system module (fs) be utilized in Angular 7?

Hello, I am currently working with Angular 7. I recently attempted to utilize the fs module in Typescript to open a directory. However, I encountered an error message stating: "Module not found: Error: Can't resolve fs". Despite having types@node and ...

I encountered a SyntaxError while parsing JSON due to an absence of a number after a minus sign at position 1

I am trying to use the replicate model visoar/product-photo:edf42659dae0da88a26dba4912e7e4bb6c2fba25b1e1c6a5464cf220e467bce0, but when I provide it with an image and a prompt like on this page.tsx: "use client" import { LandingNavBar } from &apo ...

How can I use the target type (and maybe even the property type) as a type parameter within a decorator?

In the process of incorporating a deep-watch property decorator in Angular, the following usage has been implemented: @Component({ /* ... */ }) export class AppComp { @Watch( 'a.b.c', function (last, current, firstChange) { // ca ...

Trouble displaying JSON markers on Ionic Google Maps

Looking for assistance related to this issue? Check out Ionic Google Maps Markers from JSON In my Ionic App with Google Maps integration, I'm facing an issue where although the map displays correctly, the pin markers are not showing up. It seems like ...

Guide to linking properties to Bootstrap 5 components within Angular

I am currently using Angular 13 along with Bootstrap 5. The bootstrap elements are functioning perfectly fine for static content. <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popo ...

Extract data from radio buttons to generate dynamic URLs using Angular

I have a unique challenge involving two forms containing radio buttons. The goal is to select an option from the first form, then proceed to the second form to make another selection. Depending on the combination of options chosen, I need to redirect to a ...