When I type a search string in the column "Failure signature" in my code, it doesn't seem to work. The data is not filtered based on the search string provided, and an error is thrown. I have identified the line where the error occurs.
I have created a stackblitz link to reproduce the error. Interestingly, it works with dummy data, but when I switch to a backend URL to fetch data from the database, I encounter this error.
Here is the stackblitz link with the complete code: https://stackblitz.com/edit/angular-uxnrrr?file=src/app/failure-signature/failure-signature.component.html
failure-signature.component.html
<html ng-app="failure-signature">
<h1>Root cause analysis Dashboard</h1>
<nav class="navbar">
<input
class="form-control"
type="text"
name="Failure_signature"
[(ngModel)]="Failure_signature"
(ngModelChange)="Search($event)"
placeholder="Search for failure signature...."
/>
</nav>
<table class="table table-bordered">
<thead>
<tr>
<th>commit</th>
<th>gerrit</th>
<th>failure_signature</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let cm of wifi_gerrit_commit_messages?.posts">
<td>{{cm.commit_id}}</td>
<td>{{cm.gerrit}}</td>
<td>{{cm.Failure_signature}}</td>
</tr>
</tbody>
</table>
</html>
failure-signature.component.ts
import { Component, OnInit, Injectable, ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { DomSanitizer } from '@angular/platform-browser';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { enableProdMode } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { wifi_gerrit_commit_messages } from '../_model/wifi_gerrit_commit_messages';
import { FailureSignatureService } from './failure-signature-service';
import { RESOURCE_CACHE_PROVIDER } from '@angular/platform-browser-dynamic';
@Component({
selector: 'app-failure-signature',
templateUrl: './failure-signature.component.html',
styleUrls: ['./failure-signature.component.css'],
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class FailureSignatureComponent {
wifi_gerrit_commit_messages: wifi_gerrit_commit_messages[] = [];
Failure_signature: any;
constructor(public fss: FailureSignatureService) {}
ngOnInit(): void {
this.fss.get_wifi_gerrit_commit_messages().subscribe((Response) => {
this.wifi_gerrit_commit_messages = Response;
});
}
Search(value: string) {
if (value == '') {
this.ngOnInit();
} else {
this.wifi_gerrit_commit_messages = this.wifi_gerrit_commit_messages.filter((res) => {
return res.Failure_signature.toLocaleLowerCase().match(this.Failure_signature.toLocaleLowerCase());
});
}
}
}
Error Line:-
this.wifi_gerrit_commit_messages = this.wifi_gerrit_commit_messages.filter(res => {
return res.Failure_signature.toLocaleLowerCase().match(this.Failure_signature.toLocaleLowerCase());
ERROR:-
at FailureSignatureComponent.push../src/app/failure-signature/failure-signature.component.ts.FailureSignatureComponent.Search (failure-signature.component.ts:50)
at Object.eval [as handleEvent] (FailureSignatureComponent.ngfactory.js:62)
at Object.handleEvent (core.js:27341)
at Object.handleEvent (core.js:27886)
at dispatchEvent (core.js:18085)
at core.js:19288
at SafeSubscriber.schedulerFn [as _next] (core.js:22113)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:132)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
UPDATED ERROR:-
ERROR TypeError: Cannot read properties of undefined (reading 'toLocaleLowerCase')
at failure-signature.component.ts:77
at Array.filter (<anonymous>)
at SearchPipe.push../src/app/failure-signature/failure-signature.component.ts.SearchPipe.transform (failure-signature.component.ts:71)
at checkAndUpdatePureExpressionInline (core.js:27032)
at checkAndUpdateNodeInline (core.js:27601)
at checkAndUpdateNode (core.js:27559)
at prodCheckAndUpdateNode (core.js:28100)
at Object.eval [as updateDirectives] (FailureSignatureComponent.ngfactory.js:89)
at Object.updateDirectives (core.js:27888)
at checkAndUpdateView (core.js:27541)