Search button not responding in StartDate and EndDate Search Filter in ngx-pagination

Question

I am consuming an end-point in Angular-14 from ASP.Net Core-6 Web API using JSON response.

Without Parameter, my endpoint URL from is like this:

https://localhost/MyApp/api/v1/all-merchants

While with Parameter it becomes:

https://localhost/MyApp/api/v1/all-merchants?StartDate=2022-01-01&EndDate=2023-01-01&PageNumber=2&PageSize=10

Then I have this JSON response from the Web API:

{
  "data": {
    "pageItems": [
      {
        "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
        "merchantName": "Jonathan Plc",
        "accountName": "Jonathan"
        "createdAt": "2022-02-02T09:54:12.513"
      }
    ],
    "currentPage": 2,
    "pageSize": 10,
    "numberOfPages": 6,
    "totalRecord": 55
    "previousPage": 1
  },
  "successful": true,
  "message": "string",
  "statusCode": 0
}

ANGULAR

I have the Angular code below

Service:

I am sending startdate and endDate like this way.

getAllMerchantsPagination(pageNumber?: number,pageSize?: number, startDate?: string, endDate?: string): Observable<IMerchantList[]> {
  let params = new HttpParams()
    .set('pageNumber', pageNumber?.toString() ?? '')
    .set('pageSize', pageSize?.toString() ?? '')
    .set('StartDate', startDate ?? '')
    .set('EndDate', endDate ?? '');

  return this.http.get<IMerchantList[]>(this.baseUrl + '/merchants/all-merchants', { params: params });
}

model (IMerchantList):

export interface IPageItem {
  id: string;
  merchantName: string;
  accountName: string;
  createdAt: Date
}

export interface IData {
  pageItems: IPageItem[];
  pageSize: number;
  currentPage: number;
  numberOfPages: number;
  totalRecord: number;
}

export interface IMerchantList {
  data: IData;
  successful: boolean;
  message: string;
  statusCode: number;
}

Then I have the component:

component.ts:

  allMerchantList: any[] = [];
  dataBk: IPageItem[] = this.allMerchantList;
  pageSize: number = 10;
  currentPage: number = 1;
  numberOfPages!: number;
  totalRecords: number = 0;
  pageSizes = [10, 20, 50, 100];
   startDate: string = '';  
   endDate: string = '';  
   myStartDate!: Date;  
   myEndDate!: Date;   
   duplicateArray: any;

       constructor(    
    private transactionService: TransferService,    
    private excelService: ExcelExportService,    
    private datePipe: DatePipe,    
    private currencyPipe: CurrencyPipe
   ) 
   {      
   }

   ngOnInit(): void {    
    this.duplicateArray=this.array;    
    this.myStartDate = new Date("12-08-1990");         
    this.loadAllMerchants();        
        } 

loadAllMerchants() {
  this.merchantService.getAllMerchantsPagination(this.currentPage, this.pageSize, this.startDate, this.endDate).subscribe({
    next: (res: any) => {
      this.allMerchantList = res.data.pageItems;
      this.totalRecords = res.data.totalRecord;
      this.currentPage = res.data.currentPage;
      this.pageSize = res.data.pageSize;
      this.dataBk = res.data.pageItems;
    }
  })
}

  handlePageChange(event: number): void {
    this.currentPage = event;
    this.loadAllMerchants();
  }

  handlePageSizeChange(event: any): void {
    this.pageSize = event.target.value;
    this.currentPage = 1;
    this.loadAllMerchants();
  }

reverseAndTimeStamp(dateString: any) {    
  const reverse = new Date(dateString.split("-").reverse().join("-"));    
  return reverse.getTime();    
}    

filterDate() {        
  let fromdate=moment(this.myStartDate).format('DD-MM-YYYY');    
  console.log(fromdate)    
  let todate=moment(this.myEndDate).format('DD-MM-YYYY');    
  if(this.myStartDate && this.myEndDate){    
  const selectedMembers = this.array.filter((m: { fromDate: any; }) => {            
   return this.reverseAndTimeStamp(m.fromDate) >= this.reverseAndTimeStamp(fromdate) && this.reverseAndTimeStamp(m.fromDate) <= this.reverseAndTimeStamp(todate)        
  }        
  );        
   this.duplicateArray=selectedMembers    
  }else{    
 this.duplicateArray=this.array    
 }         
}

component.html

<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <label for="startDate">Start Date</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
        </div>
        <input type="text"
        bsDatepicker
         [(ngModel)]="myStartDate"
        [bsConfig]="{ isAnimated: true, dateInputFormat: 'DD-MM-YYYY', returnFocusToInput: true, showClearButton: true, clearPosition: 'right' }">
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <label for="endDate">End Date</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
        </div>
        <input type="text"
        placeholder="DD-MM-YYYY"
        bsDatepicker
        [(ngModel)]="myEndDate"
        [bsConfig]="{ isAnimated: true, dateInputFormat: 'DD-MM-YYYY', returnFocusToInput: true, showClearButton: true, clearPosition: 'right' }">
      </div>
    </div>
  </div>

                   

  <button type="button"  class="btn btn-primary"  title="Apply" (click)="filterDate()"> 
     Search
   </button> 

                     

<div class="card-body">
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th style="width: 10px">#</th>
        <th [class.active]="order === 'merchantName'" (click)="setOrder('merchantName')">Merchant Name <span [hidden]="reverse">▼</span
          ><span [hidden]="!reverse">▲</span></th>
        <th [class.active]="order === 'accountName'" (click)="setOrder('accountName')">Merchant Account Name. <span [hidden]="reverse">▼</span
          ><span [hidden]="!reverse">▲</span></th>
        <th>Status</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody *ngIf="allMerchantList != undefined">
      <tr *ngFor="let row of allMerchantList
      | paginate : {
        itemsPerPage: pageSize,
        currentPage: currentPage,
        totalItems: totalRecords
      } | orderBy: order:reverse:caseInsensitive; let i = index;">
      <td style="width: 80px">
        {{ i + 1 }}.</td>
        <td>{{ row?.merchantName || 'N/A' }}</td>
        <td>{{ row?.accountName || 'N/A' }}</td>
      </tr>
      <tr *ngIf="allMerchantList.length ==0;">
        <td colspan="7" class="text-center">
          <span class="align-center">No Data Found!</span>
        </td>
      </tr>
    </tbody>
  </table>

CreatedAt field is used as the StartDate andEndDate

With ngx-pagination, the pagination is working fine.

I am using ngx-bootstrap-datepicker, I want the user to select the StartDate and End Date, then click on the Search button. When this is done, it should display the result on the html table shown in the code.

When the user clicks on Search button there was no response on the table. So when I checked the console, I got this error:

ERROR TypeError: Cannot read properties of undefined (reading 'filter')     at MerchantsComponent.filterDate (merchants.component.ts:125:40)     at MerchantsComponent_Template_button_click_51_listener (merchants.component.html:71:86)

merchants.component.ts:125:40

is

const selectedMembers = this.array.filter((m: { fromDate: any; }) => {

while merchants.component.html:71:86

is

<button type="button" class="btn btn-primary" title="Apply" (click)="filterDate()"> Search

How do I get this resolved?

Answer 1

const selectedMembers = this.array.filter((m: { fromDate: any; }) => {
                             ^^^^^     

It is because array property is not initialized yet and it remains as undefined. When you trigger the filterDate method, it throws Cannot read properties of undefined (reading 'filter') because it can not filter method in the array property since it is undefined. Double chech where you initialize your properties.