Guide on designing a date range search filter using Angular

Question

Guide on designing a date range search filter using Angular

Hello Stack Overflow community.

I am currently working on a date range filter pipe in Angular to fetch data from an API. However, I'm facing an issue where the filter is not displaying any data after applying it.

The data is being fetched from Firebase:

Below is the service responsible for fetching the data:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class FacturasService {

  constructor(private http: HttpClient) { }

  getFacturas() {
    return this.http.get('https://loggin-app-fa0a7.firebaseio.com/data/facturas.json');
  }
}

Additionally, here is the pipe used to filter the data based on a date range:

...

Lastly, this snippet shows how the pipe is applied within the component:

...

If you would like to view the whole project, please visit:

https://stackblitz.com/edit/github-necjgp?file=src%2Fapp%2Fservices%2Ffacturas.service.ts

Any help or guidance from the SO community would be greatly appreciated. Thank you!

javascript angular typescript datetime frontend

Answer 1

Answer №1

Check out the demo I discovered a few issues in the code. One of them is within the for loop where you should use filteredRow instead of row, and another issue is with the missing conversion of dates, which should be done like this: new Date(filteredRow.fecha). Additionally, I encountered problems when adding and removing dates.

To address these issues, I replaced the for loop with the filter method and made improvements by implementing controls to handle date input removal.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filtroFecha'
})
export class FiltroFechaPipe implements PipeTransform {
  transform(row: any, f1: Date, f2?: Date): any {
    if(f1.toString().length == 0) f1 = new Date("1995-12-25T11:30:00.000Z");
    f2 == null ? f2 = new Date() : f2; 
    if (f1 >= f2 || f1 == null) { return row;}
    return row.filter(x => {return new Date(x.fecha) >= new Date(f1) && new Date(x.fecha) <= new Date(f2)});   
  }
}

Answer 2

Check out the demo I discovered a few issues in the code. One of them is within the for loop where you should use filteredRow instead of row, and another issue is with the missing conversion of dates, which should be done like this: new Date(filteredRow.fecha). Additionally, I encountered problems when adding and removing dates.

To address these issues, I replaced the for loop with the filter method and made improvements by implementing controls to handle date input removal.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filtroFecha'
})
export class FiltroFechaPipe implements PipeTransform {
  transform(row: any, f1: Date, f2?: Date): any {
    if(f1.toString().length == 0) f1 = new Date("1995-12-25T11:30:00.000Z");
    f2 == null ? f2 = new Date() : f2; 
    if (f1 >= f2 || f1 == null) { return row;}
    return row.filter(x => {return new Date(x.fecha) >= new Date(f1) && new Date(x.fecha) <= new Date(f2)});   
  }
}

Answer 3

Answer №2

I modified the Pipe code to improve its functionality:

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

@Pipe({
  name: 'filtroFecha'
})

export class FiltroFechaPipe implements PipeTransform {

  transform(row: any, f1: Date, f2?: Date): any {

const resultadoFiltro = [];
let date1 = new Date(f1);
let date2 = new Date(f2);
// Check if date is within range
if (f1 >= f2 || f1 == null) {
  return row;
}
// Set current date if end date is invalid
if (f2 == null) {
  f2 = new Date();
}
// Create new array if both dates are correct
for (const filteredRow of row) {
  let a = new Date(filteredRow.fecha);

  if (a > date1 && a <= date2) {
    resultadoFiltro.push(filteredRow);
  }
}
return resultadoFiltro;
  }
}

With these changes, the Pipe now functions correctly by comparing Dates instead of strings.

Answer 4

I modified the Pipe code to improve its functionality:

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

@Pipe({
  name: 'filtroFecha'
})

export class FiltroFechaPipe implements PipeTransform {

  transform(row: any, f1: Date, f2?: Date): any {

const resultadoFiltro = [];
let date1 = new Date(f1);
let date2 = new Date(f2);
// Check if date is within range
if (f1 >= f2 || f1 == null) {
  return row;
}
// Set current date if end date is invalid
if (f2 == null) {
  f2 = new Date();
}
// Create new array if both dates are correct
for (const filteredRow of row) {
  let a = new Date(filteredRow.fecha);

  if (a > date1 && a <= date2) {
    resultadoFiltro.push(filteredRow);
  }
}
return resultadoFiltro;
  }
}

With these changes, the Pipe now functions correctly by comparing Dates instead of strings.

Guide on designing a date range search filter using Angular

Answer №1

Answer №2

Similar questions

Send the array within the "data" attribute when making a Bootstrap AJAX request on the server side

Is there a way to clear the email form after submitting it, allowing for another email to be sent seamlessly without the need to refresh the

Is the use of addEventListener("load",... creating an excessive number of XmlHttpRequests?

jQuery failing to trigger onClick event for a specific group of buttons

How to Use an Object Created from a Different Class in TypeScript

Problem with the Auto-fill Feature in PrimeNG Module

Troubleshooting Challenges in JavaScript/jQuery Hangman Game

Transform a current ASP.NET Core 2.1 Angular application into Angular 6 using Angular CLI 6

Creating a Date Computation Tool that Adds Additional Days to a Given Date

Is it possible to wait for two asynchronous actions using only one await statement?

Encountering a 404 error when trying to retrieve parameters in Express JS

JavaScript group by first letter issueI am facing a problem when trying

The function is able to retrieve the previous value stored in the state array

Issue with React Native Hook where converting a function into a class variable results in 'undefined'

Tips for keeping a checkbox checked on page refresh in React JS

Encountering problem with ngx material timepicker field within a mat dialog

Error message: Angular model displaying nested Typescript object within object has encountered an issue

Unable to fetch QueryParameters in Angular 14

I am struggling to make the map method display the specific components I need

Is it possible to save user inputs in a .json file for future use, and retrieve and reuse them in subsequent sessions or processes?