Ionic 4 read Local JSON file with Search Bar

Question

Currently I've been facing issues with being able to do filtering on local JSON data in my Ionic project. I've looked at other resources and used that as reference when working on writing the filterItems function for the application. I haven't been receiving any errors in the console when using the function, however the table is not filtering or returning the filtered items to the ngx-datatable that I am using to display the data to the application. I am wondering if this problem has to do with either the filterItems function, or the way I am loading the data to the application from the local json file. Any assistance would be of great help. I'll be including both the HTML code and the typescript code.

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);
     })
    }
  }
}

Answer 1

You code can't work because you are filtering on object

items: any[];
return (item.toString().toLowerCase().indexOf(...

If you want to filter on one column (for example the requeststatus column), you can do that :

return (item.requeststatus.toString().toLowerCase().indexOf(val.toString().toLowerCase()) > -1);

If you want to filter on all columns of the table, I suggest you to take a look at this question