Develop a tailored filter by utilizing the FilterPredicate to refine the DataSource

Currently, I have been storing all my data in a dataSource and using the standard filter for searches. However, I am now interested in performing searches using the "OR" operator.

For example:

{name : john, age : 25, work : driver}

{name : peter, age : 28, work : writer}

{name : james, age : 39, work : athlete}

If I input "john james," I expect the filter function to return line 1 AND line 3.

I believe we need to implement a filterPredicate for this purpose, but I am unsure of how to create/use one. Unfortunately, I have not come across any helpful examples or documentation besides the following prototype:

filterPredicate: ((data: T, filter: string) => boolean);

Does anyone have any ideas or code samples on how to achieve this?

Here is the current version of my function for basic search functionality:

  applyFilter(filterValue: string) {
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
  }

Answer №1

let people = [
  {name : 'emma', age : 30, work : 'artist'},
  {name : 'lucas', age : 34, work : 'chef'},
  {name : 'mia', age : 41, work : 'scientist'}
]

const search = "emma lucas";

const filteredList = people.filter(person => search.includes(person.name));

This method should do the trick!

utilizing DataFilter:

this.dataFilter.searchCriterion = (entry, term) => term.includes(entry.name)

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

Using the appropriate asynchronous action in Redux with the Redux-Thunk middleware

While learning middleware redux-thunk, I created a simple React App. However, I am facing a transpilation issue due to an incorrect type of async action fetchPosts in the interface PostListProps. Below is the code snippet of the functional component where ...

A guide to implementing Typescript Generics in modifier functions

I am searching for a solution to properly enforce strong typing in the following scenario. I believe Typescript Generics might be the way to go here. interface Person { name: string; age: number; } const person: Person = { name: "John", ...

Interactive Timeline - Adjust color on click

I am having trouble implementing a timeline and changing the color when clicking on different states. Can anyone help me figure out what the issue is or how I can achieve this? I intended to give each state a different color, but sadly, it didn't wor ...

Key ConfusionUpdated descriptionKeyword confusion

What is the reason for the absence of errors in this code snippet: interface X { a: string; b?: string; } type Y<T> = { [key in keyof T]: boolean; } class A<Definition> { constructor(public readonly definition: Definition, publ ...

Jest / eslint error: Function has no defined return type

I'm currently working with Jest in my codebase const fetchData = async () => { await API.fetchDataAsync(param); }; await expect(fetchData()).rejects.toThrowError(CustomError); However, I encountered an eslint error 92:28 error ...

Begin the NextJS project by redirecting the user to the Auth0 page without delay

I am new to coding and currently working on a project using Typescript/NextJS with Auth0 integration. The current setup navigates users to a page with a login button that redirects them to the Auth0 authentication page. However, this extra step is unneces ...

The header component does not update properly post-login

I am currently developing a web-app using Angular 8. Within my app, I have a header and login page. My goal is to update the header after a user logs in to display information about the current logged-in user. I attempted to achieve this using a BehaviorS ...

The display within the object array in Angular is failing to show any values

Problem: The angular for loop is not displaying values on line {{ item.Id }}. Although the correct length of 10 is being retrieved, no actual values are shown in the screenshot below. https://i.stack.imgur.com/9keGn.png Debugging: Running console.log(thi ...

"Time" for creating a date with just the year or the month and year

I am trying to convert a date string from the format "YYYYMMDD" to a different format using moment.js. Here is the code snippet I am using: import moment from 'moment'; getDateStr(date: string, format){ return moment(date, 'YYYYMMDD&a ...

Which is better suitable in TypeScript generics: void, never, or undefined?

Curious about this topic. I am seeking a definitive answer to clarify my understanding. My goal is to specify to the compiler/language service/reader that T should be absolutely nothing, empty, or null. I am unsure whether void, never, or undefined is the ...

Enhance Your Vue3 Experience with Type-Safe Axios Requests

I have been exploring the concepts of "type safety" in my project using Vue3, TypeScript, and Axios. Although it seems straightforward, I can't shake the feeling that I am overlooking something obvious! To start off, I defined an interface called Bo ...

The NestJS framework encountered an error due to a method being undefined in the

Encountering Error with NestJS Function create123: TypeError - Cannot read properties of undefined (reading 'create123') The constructor is displayed below \`export class AuthenticationService { constructor( private readonly usersServ ...

What are some strategies I can implement to effectively manage different errors and ensure the app does not crash

I came across a variety of solutions for error handling. The key concept revolves around this explanation: https://angular.io/api/core/ErrorHandler Attempts were made to implement it in order to capture TypeError, however, the outcome was not successful: ...

JSHow to dynamically access child elements in objects

I am facing a challenge in dynamically accessing a JSObject item: jsonElement = { name:"name", subElement { subElementName: "nameSubElement", } } Currently, I have the element as: //level = "name" jsonElement[level] -> it works //lev ...

What is the best way to create an optional object parameter in Typescript?

I'm working on a function that looks like this: const func = (arg1: string, { objArg = true }:{ objArg: string }) => { // some code } Is it possible to make the second parameter (an object) optional? ...

All ion-menu items becoming active when one is selected

I manage an application that operates on user access levels. By identifying the user's environment and associated features, I display these features as navigation items in my menu. Initially, the menu contains two fixed items: a "home" link and a log ...

Can TypeScript be set up to include undefined as a potential type in optional chains?

Today, I encountered a bug that I believe should have been caught by the type system. Let me illustrate with an example: function getModel(): Model { /* ... */ } function processModelName(name: string) { return name.replace('x', 'y& ...

Guide to highlighting input field text using Angular

I've set up an angular page that includes an input field within its template. My goal is to highlight the text in the input field when a specific function is triggered. When I refer to "highlighting the text," I mean (check out the image below) https ...

Error: { "message": "sqlite3_prepare_v2 error: token "876EL003" not recognized", "code": 5}

I am having trouble filtering the SQLite data with two conditions. I keep getting an unrecognized token error and I suspect that my query statement might be incorrect in the script. Could you please take a look and see if you can help me out? Thank you! ...

Angular 2: A guide to dynamically adding and updating meta tags through a component, similar to the title service functionality

As someone who is just beginning to explore Angular 2, I find myself in need of setting up meta tags such as og: description and others directly from a component. I am unsure of how to dynamically update these meta tags or add new ones to the index.html fr ...