The most up-to-date Date Range Pipe available, whether it's Angular

I have been searching all over the web and have not found a solution for my specific case. I need to filter a JSON result based on a start date and end date.

Currently, I am using Angular 7 and have come across the "dateRangeFilter" but it is just an example. My code looks like this:

<tr *ngFor="let caixa of result | dateRangeFilter: '08/03/2019' , '14/03/2019' ">
            <td>{{caixa.tipo}}</td>
            <td>{{caixa.data}}</td>
            <td>{{caixa.hora}}</td>
            <td>{{caixa.cliente}}</td>
            <td>{{caixa.valor | currency:'BRL':symbol:'1.2-2'}}</td>
 </tr>
angulartypescript

Answer №1

It is no longer recommended to utilize pipes for filtering due to performance reasons. The preferred approach is to use standard JS/ES6/.. constructs to filter your data before binding it to your visual representation. Consider implementing custom filter logic with .filter method.

For reference, you can refer to an example in a previous post: Filter Array in Array by date between 2 dates

Here's the code snippet:

data.series = data.series.filter((item: any) =>
    item.date.getTime() >= fromDate.getTime() && item.date.getTime() <= toDate.getTime()
);

Answer №2

Thank you so much for your help. I have successfully developed this code and it is working perfectly.

However, I am facing an issue with retrieving the date Begin and date End from input fields for the filter function. It seems that the function is not able to read the variables:

function dataRange(obj) {
if (obj.id >= this.dateBegin && obj.id <= this.dateEnd) {
return true;
 }
}

Interestingly, when I hardcode a String Date, everything works fine:

function dataRange(obj) {
if (obj.id >= "2019-03-01" && obj.id <= "2019-03-05") {
return true;
 }
}

Can anyone advise me on how to properly use a Variable Date in this scenario?

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

While not all attributes of the response object are null, there are certain object attributes that are displayed as null

My component is responsible for displaying data in a table that is fetched from Firestore. Although the data retrieved is complete, I am noticing that the settings attribute is often null when accessed in JSX. Occasionally, I do see the correct output, but ...

reactjstypescriptasynchronousreact-hooksnull

alter confidential member variables with spyon.and.callFake method in Jasmine

I have a service with a public method called A() which modifies a private data member within the service. A() { // make an HTTP call // update private data member based on call response } When unit testing a component that relies on this service, I w ...

angularunit-testingjasminespy

Troubleshooting routing problems with Angular + Kubernetes + Nginx

In the current project I'm working on, I've been dealing with several routing issues which I believe stem from a configuration problem. I'm looking for anyone who has faced similar challenges to share their experiences. Project Overview: ...

angulardockernginxkubernetesokta

Learn the proper way to specify the return type of a function as a class, rather than an instance, in Typescript

Is there a way to declare that a function returns a generic class definition? I have tried the following for non-generic classes, but it does not work for generic ones: export function composeAll(composeFunction: Function, depsFunction: Function): (compon ...

typescript

Ways to activate Form Validators in angular2?

I recently developed an Angular2 web application and successfully integrated a custom validator using the form builder. Although it works when the form is submitted, I am facing difficulties in triggering validation dynamically based on changes in other fo ...

angular

What is the best way to convert an array of data into a dataset format in React Native?

Within my specific use case, I am seeking to reform the array structure prior to loading it into a line chart. In this context, the props received are as follows: const data = [26.727, 26.952, 12.132, 25.933, 12.151, 28.492, 12.134, 26.191] The objective ...

javascripttypescriptreact-native

Isolating objects within a JSON array based on a single key

I am developing a system using Angular 6, and I need to create over 100 input fields. Since these inputs are used in multiple forms, I want to create a dynamic form. However, I'm trying to figure out the best way to connect the input configurations to ...

javascriptangulartypescript

What is the process of destructuring an array containing objects?

Examining this JSON structure: { "Person": { "UID": 78, "Name": "Brampage", "Surname": "Foo" }, "Notes": [ { "UID": 78, "DateTime": "2017-03-15T15:43:04.4072317", "Person": { ...

typescriptdestructuring

Unable to compile the product

Hello there! I am currently working on preparing a build to launch my app in the play store. I have attempted to create a product build, and in my main.ts file, I added the following line of code: import { platformBrowserDynamic } from '@angular/plat ...

angularionic2

Event-Propagation in Angular 5 with mat-expansion-panel within another component

In my project, I am facing a challenge where I need to create multiple mat-expansion-panels within one mat-expansion-panel. Everything works fine except for the issue that when I try to open a child-panel, it triggers the close-event of the parent-panel. ...

angulartypescripteventsangular-materialstoppropagation

Organizing an angular expansion panel

I am currently dealing with an expansion panel that has a lot of content. The layout is quite messy and chaotic, as seen here: https://ibb.co/Y3z9gdf It doesn't look very appealing, so I'm wondering if there is a way to organize it better or ma ...

cssangular

What is the proper way to use Object.entries with my specific type?

On my form, I have three fields (sku, sku_variation, name) that I want to use for creating a new product. I thought of converting the parsedData to unknown first, but it seems like a bad practice. export type TProduct = { id: string, sku: number ...

javascriptreactjstypescript

Guide: "Implementing a dynamic template reference in a function"

I have a function below that uses the setModelData method. My question is about making the template variable dynamic for both the getGlobalList and getNonGlobalList functions. For Example: 1) If getGlobalList is running, it will set template: this.Custo ...

javascriptangulartypescriptangular8

Matching TypeScript against the resulting type of a string literal template

My type declaration looks like this: type To_String<N extends number> = `${N}` I have created a Type that maps the resulting string number as follows: type Remap<Number> = Number extends '0' ? 'is zero' : Number ...

typescripttypes

Ionic project initialization encounters a setback due to a dependency problem

After setting up Ionic by running npm install -g @ionic/cli I encountered an issue while trying to initialize a new project with the command ionic start ionic-test-app The initialization process failed due to an npm dependency error that mentioned a prob ...

node.jsangularionic-frameworknpm

Trouble with running the "npm run tsc" command in Angular 2 beta

I'm facing an issue with compiling my Typescript using the command npm run ts. What's odd is that I can successfully compile and run it by running npm start. Below is the log: 0 info it worked if it ends with ok 1 verbose cli [ 'node' ...

npmangulartsc

Packaging an NPM module to enable unique import paths for Vite and Typescript integration

Is there a way to package my NPM module so that I can use different import paths for various components within the package? I have looked into webpack solutions, but I am working with Vite and TypeScript. This is the structure of my package: - src - ato ...

node.jstypescriptnpmvite

Trouble with Nextjs link not functioning properly with a URL object when incorporating element id into the pathname

Recently I added translations to my website, which means I now need to use a URL object when creating links. Everything has been going smoothly with this change except for one issue: when I try to click a link that points to /#contact. When simply using h ...

reactjstypescripturlnext.jsrouter

Typescript: Ways to fix the error 'rxjs/Rx does not have any exported member 'SubscriptionLike'

I'm attempting to replicate the steps outlined in this tutorial found here https://www.youtube.com/watch?v=gxCu5TEmxXE. However, upon running tsc -p, I encounter an error. Is there a specific import that I am missing? ERROR: node_modules/@angular/co ...

javascriptangulartypescriptfirebasegoogle-cloud-functions

Unexpected error occurred: Zone.js

I have been encountering a persistent error in the developer tools that is really frustrating me. Unhandled Promise rejection: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten. I have tried numerous solutions to ...

node.jsangularpromiseunhandledzone.js