Recently, I've encountered an issue with filtering a local JSON file based on multiple criteria. Initially, I thought that combining conditions using '&&' would solve the problem. However, when the data is loaded into Ngx-Datatable, nothing shows up. Filtering works fine with a single condition, so it's puzzling why multiple criteria don't work. Could the problem be in the JSON file? Do I need to use a different approach? Or is it related to how I'm loading the data view? I'm intrigued as to why this isn't working because I assumed that .filter() could handle multiple criteria since it worked with a single condition before.
TypeScript File
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import data from './../../assets/pathrequests.json';
import { NavController } from '@ionic/angular';
import { NavigationExtras } from '@angular/router';
import { AlertController } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-view-necropsy-details',
templateUrl: './view-necropsy-details.page.html',
styleUrls: ['./view-necropsy-details.page.scss'],
})
export class ViewNecropsyDetailsPage implements OnInit {
pathrequestid: string;
procedureid: string;
requestdate: string;
animalqty: string;
marker: string;
method: string;
fixative: string;
handling: string;
processing: string;
items: any[];
private pathrequests: any[] = data;
tablestyle = 'bootstrap';
constructor(private alertCtrl: AlertController, private http: HttpClient, private route: ActivatedRoute, private router: Router, public navCtrl: NavController) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.pathrequestid = params["pathrequestid"];
this.procedureid = params["procedureid"];
this.requestdate = params["requestdate"];
this.animalqty = params["animalqty"];
this.marker = params["marker"];
this.method = params["method"];
this.fixative = params["fixative"];
this.handling = params["handling"];
this.processing = params["processing"];
});
this.loadData();
}
loadData(){
let data:Observable<any>;
data = this.http.get('assets/tissue.json');
data.subscribe(data => {
this.items = data.filter(item => item.pathrequestid === this.pathrequestid && item.procedureid === this.procedureid);
console.log(this.items);
})
}
}
HTML Template
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start"gt;
<ion-menu-button menu ="main-menu"></ion-menu-button>
</ion-buttons>
<ion-buttons>
<ion-back-button defaultHref="/view-procedure"></ion-back-button>
</ion-buttons>
<ion-buttons class="button_style" slot="end">
<ion-button (click)="switchStyle()">
{{ tablestyle }}
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ngx-datatable class="necropsydetails_table"
[ngClass]="tablestyle"
[rows]="items"
[columnMode]="'force'"
[headerHeight]="60"
[rowHeight]="'auto'">
<ngx-datatable-column name="tissue"></ngx-datatable-column>
<ngx-datatable-column name="collectflg"></ngx-datatable-column>
<ngx-datatable-column name="weighflg"></ngx-datatable-column>
<ngx-datatable-column name="photoflg"></ngx-datatable-column>
<ngx-datatable-column name="tissuecomment"></ngx-datatable-column>
</ngx-datatable>
</ion-content>