Filtering arrays of objects dynamically using Typescript

I am looking to create a dynamic filter for an array of objects where I can search every key's value without specifying the key itself. The goal is to return the matched objects, similar to how the angular material table filters all columns.

[
   {
      "id":4,
      "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503526357e383f3c24102235212235237e393e">[email protected]</a>",
      "first_name":"Eve",
      "last_name":"Holt",
      "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg",
      "date":"2020-02-24T13:19:08.630025Z"

},
   {
      "id":5,
      "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6959e97849a9385d89b9984849f85b6849387849385d89f98">[email protected]</a>",
      "first_name":"Charles",
      "last_name":"Morris",
      "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg",
      "date":"2020-02-24T13:19:08.630025Z"

},
   {
      "id":6,
      "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5723253634322e7925363a382417253226253224793e39">[email protected]</a>",
      "first_name":"Tracey",
      "last_name":"Ramos",
      "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg",
      "date":"2020-02-24T13:19:08.630025Z"

}
]

Additionally, I would like to implement filtering based on date.

javascriptangulartypescriptrxjs

Answer №1

If you have an array of objects stored in the variable data, you can find matches by following this approach.
The matched objects will be stored in the variable filtered.

const searchTerm = 'yourValue';
const filtered = data.filter(item => {
  return !!JSON.stringify(Object.values(item)).match(new RegExp(searchTerm, 'i'));
});

Answer №2

Searching for text can be done easily with the help of Lunr, a lightweight tool for full text search. If you need to filter by date, consider using Crossfilter.

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

Is there a way to minimize the number of Nuxt pages on a website?

Consider creating a large nuxt application with 100 routes. What strategies would you recommend for effectively managing these routes within the app, excluding micro-frontend solutions? ...

javascriptvue.jsnuxt.js

Passing a JSON object between pages in Next.js using props during programmatic navigation

In my Next.js project, I have two pages. On the first page, the user fills out a form to create a post. The information is stored in a large JSON object, which needs to be passed to the second page for the user to preview the post before finalizing it. Wi ...

javascriptreactjsnext.js

Preventing the automatic selection of the initial item in a PrimeNG dropdown menu

While utilizing the p-menu component from PrimeNG in popup mode ([popup]="true"), I encountered an unexpected issue where the first item in the menu is automatically selected and turns gray. Here is the code snippet that I am using: <p-menu #menu [popu ...

htmlcssangulartypescriptprimeng

Incorporating Stripe: Enhancing Online Payments through Redirected Checkout

I am currently in the process of upgrading our checkout system to be SCA compliant. According to the documentation, I must utilize PaymentIntents for this purpose. I have followed the steps outlined in their document found at: https://stripe.com/docs/payme ...

javascriptjavahtmlstripe-payments

Obtain the specific key's value from a new Map state

In my code, I've defined a variable called checkedItems as a new Map(); When I try to console.log(checkedItem), the output is as follows: Map(3) {"1" => true, "1.5" => true, "2" => false} Is there a way ...

javascriptreactjs

JavaScript code for iframe auto resizing is not functioning properly on Firefox browser

I have implemented a script to automatically resize the height and width of an iframe based on its content. <script language="JavaScript"> function autoResize(id){ var newheight; var newwidth; if(document.getElementById){ newh ...

javascriptjqueryhtmliframeautoresize

Importing Typescript modules by specifying their namespace instead of using a function

I have been working on a project where I needed to generate typings from graphql using the gql2ts library. In the gql-2-ts file, I initially used a namespace import for glob, which resulted in TypeScript showing me an error as intended. I then switched the ...

node.jstypescriptgraphqltsconfig

Combining URLs in Angular 6 - A Step-by-Step Guide

How can I concatenate the commonUrl from CommonClass in Angular 6 for category.service.ts? common-class.ts export class CommonClass { constructor(public commonUrl : string = 'http://localhost:3000'){}; } category.service.ts import { CommonC ...

javascriptstringtypescript

Steps to resolve the issue of being unable to destructure property temperatureData from 'undefined' or 'null' in a React application without using a class component

CODE: const { temperatureData } = state; return ( <> <div className="flex flex-row"> {temperatureData.map((item, i) => ( <div className="flex flex-auto rounded justify-center items-center te ...

reactjstypescriptnext.js

Firebase functions are giving me a headache with this error message: "TypeError: elements.get is not

Encountering the following error log while executing a firebase function to fetch documents and values from the recentPosts array field. Error: Unknown error status: Error: Unknown error status: TypeError: elements.get is not a function at new HttpsEr ...

javascripttypescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

Planning and organization of a Node.js/Express project

Having a background in MVC programming with frameworks like Laravel, CodeIgniter, and Django, I have now transitioned to working on larger projects in Node.js. However, I am struggling to find a suitable way to structure my project effectively... After so ...

javascriptnode.jsexpress

Is there a way to determine if an npm package is compatible with a specific version of Angular

As I work on my project, I realize that I have many dependencies on libraries that support Angular2 but not Angular6. It can be challenging to determine if a library supports Angular2 from just reading their GitHub pages. One idea is to check the package ...

angulartypescript

The size of objects on canvas is not consistent when loading with fabric.js loadFromJSON

Click here to view the code var canvas = new fabric.Canvas('canvas_1'); var canvas2 = new fabric.Canvas('canvas_2'); var imgObj = new Image(); imgObj.src = "https://gtaprinting.ca/wp-content/uploads/2021/05/blank-t-shirt-front-gre ...

javascriptjsoncanvasfabricjs

Exploring the Behavior of Typescript Modules

When working with the module foo, calling bar.factoryMethod('Blue') will result in an instance of WidgetBlue. module foo { export class bar { factoryMethod(classname: string): WidgetBase { return new foo["Widget" + classname](); ...

typescript

When working with VueJS and Vuex, using the splice method to replace an item (object) in an array stored in Vuex does not trigger a re-render of the

I have an array of records. Each record consists of an object with _id (mongo id), title, and value (value is an object with amount and currency). When displaying the list of records using v-for, the ':key' for each item in the list is set to th ...

javascriptvue.jsvuexvuejs3v-for

Tips for correctly updating the status of a checkbox linked to a database

I need some guidance on handling the state change of an input checkbox in React. The checkbox's initial value is determined by a boolean retrieved from a database. Currently, I am using defaultChecked to set the checkbox initially based on this boolea ...

javascriptreactjscheckbox

Error: Failed to locate package "package-name" in the "npm" registry during yarn installation

While working on a large project with numerous sub-projects, I attempted to install two new packages. However, YARN was unable to locate the packages despite the .npmrc being present in the main directory. ...

typescriptnpmyarnpkg

Passing PHP values to JavaScript and then to AJAX requires using the appropriate syntax and techniques for

Currently, I am populating a table with data retrieved from my database. Here is a snippet of the code: <?php //mysqli_num_rows function while($row=mysqli_fetch_array //I know this may be wrong, but that's not the point echo "<tr><t ...

phpjavascriptjquerymysql

retrieving identifiers from a separate table for an array of values

As a newcomer to node and noSQL databases, I am facing challenges in grasping the concept of passing an array of IDs and retrieving the corresponding values from another table. I have 'users' and 'products' tables in my database. The st ...

javascriptnode.jsmongodbexpressmongoose

What is the most effective way to alter the elements in a JavaScript array based on the total count of another element's value?

I have a task where I need to manipulate an array by adding or removing elements based on the total count of another value. let data = [ { "details": [ { "Name": "DataSet1", "Severity": "4& ...

javascriptarraysjsonjavascript-objects