My current challenge involves filtering local JSON data in my Ionic project. Despite referencing other resources, I am unable to filter or display filtered items on the ngx-datatable. I suspect the issue may lie either in the filterItems function implementation or how the data is loaded from the local JSON file. Any guidance on this matter would be greatly appreciated. Below are the HTML and TypeScript code snippets:
HTML code
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start" class="button_style">
<ion-button (click)="switchStyle()">
{{ tablestyle }}
</ion-button>
</ion-buttons>
<ion-searchbar animated slot="end" (ionInput)="filterItems($event)" placeholder="Search by Path Request"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ngx-datatable class="request_table"
[ngClass]="tablestyle"
[rows]="items"
[columnMode]="'force'"
[headerHeight]="50"
[rowHeight]="'auto'">
<ngx-datatable-column name="requestid"></ngx-datatable-column>
<ngx-datatable-column name="number"></ngx-datatable-column>
<ngx-datatable-column name="requeststatus"></ngx-datatable-column>
<ngx-datatable-column name="animalcount"></ngx-datatable-column>
<ngx-datatable-column name="primaryinvestigator"></ngx-datatable-column>
<ngx-datatable-column name="studypathologist"></ngx-datatable-column>
<ngx-datatable-column name="Actions" sortable="false" prop="name">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<ion-button size="small" fill="outline" (click)="goToProcedureDetails(row)">View</ion-button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</ion-content>
Typescript code
import { AlertController } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
@Component({
selector: 'app-request',
templateUrl: './request.page.html',
styleUrls: ['./request.page.scss'],
})
export class RequestPage implements OnInit {
items: any[];
searchItems: any;
public RequestFilter: string[];
tablestyle = 'bootstrap';
constructor(private alertCtrl: AlertController, private http: HttpClient, private router: Router) { }
ngOnInit() {
this.loadData();
}
loadData(){
let data:Observable<any>;
data = this.http.get('assets/requests.json');
data.subscribe(data => {
this.items = data;
console.log(this.items);
});
this.initializeItems();
}
initializeItems(){
this.RequestFilter = this.items;
}
goToProcedureDetails(row){
this.router.navigate(['/view-procedure', row.pathrequestid]);
console.log(row.pathrequestid);
}
filterItems(ev:any){
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
var val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.RequestFilter = this.items.filter((item) => {
return (item.toString().toLowerCase().indexOf(val.toString().toLowerCase()) > -1);
})
}
}
}