I am currently building a search feature for my app (using Angular 14 + Ionic 6) that searches via API call using the GET method. Struggling with an issue where it keeps returning 'undefined' in the console, and also encountering a problem with a pipe. Whenever I input text into the search bar, I receive this error in the console:
TypeError: Cannot read properties of undefined (reading 'filter')Would appreciate any assistance or guidance on how to resolve these issues. Thank you! :)
search.service.ts:
searchCall(term: string) {
return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
switchMap(token => {
const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
let params = new HttpParams();
params = params.append('term', term);
return this.httpClient.get(`${environment.apiUrl}search`, {headers, observe: 'response', params});
}),
catchError(err => {
console.log(err.status);
if (err.status === 400) {
console.log(err.error.message);
}
if (err.status === 401) {
this.authService.logout();
this.router.navigateByUrl('/login', {replaceUrl: true});
}
return EMPTY;
}),
);
}
search.page.ts:
export class SearchPage implements OnInit {
term = '';
products: any = {
id: '',
name: '',
product_code: '',
};
constructor(
private searchService: SearchService,
) { }
ngOnInit() {
this.search(this.term);
}
search(term: string) {
this.searchService.searchCall(term).subscribe(
(data: any) => {
console.log('Search: ' + data.body.products);
},
error => {
console.log('Error', error);
}
);
}
}
search.page.html:
<ion-content [fullscreen]="true" class="ion-padding">
<ion-searchbar [debounce]="1000" placeholder="Search" show-clear-button="focus" [(ngModel)]="term"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let produkt of products?.results | filter : term">
<ion-label>{{ produkt.product_code }} {{ produkt.name }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
filter.pipe.ts:
export class FilterPipe implements PipeTransform {
public transform(value: any[], filterText: string) {
return filterText.length > 3 ? value.filter(x => x.name.toLowerCase().includes(filterText.toLowerCase())) : value;
}
}
EDIT: Adding code snippet from import modules as per comments request: My filter pipe is included within the shared.module.ts file:
import { NgModule } from '@angular/core';
import { CommonModule } from '@common';
import { FooterComponent } from '../navigation/footer/footer.component';
import { RouterLink } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { SideMenuComponent } from '../navigation/side-menu/side-menu.component';
import { SafeHtmlPipe } from '../pipes/safe-html.pipe';
import { FilterPipe } from '../pipes/filter.pipe';
@NgModule({
declarations: [FooterComponent, SideMenuComponent, SafeHtmlPipe, FilterPipe],
imports: [
CommonModule,
RouterLink,
IonicModule
],
exports: [FooterComponent, SideMenuComponent, SafeHtmlPipe, FilterPipe]
})
export class SharedModule { }
API JSON response format:
[
{
"id": 3,
"name": "test",
"product_code": "45623146546"
},
]