Gracias por vuestras repuestas.
Estoy tratando de filtrar una tabla de angular material, pero tengo un problema porque estoy tratando de filtrar con un input para que filtre por todos los contenidos y con cehckboxes por dispositivos online o provisionados. El filtrado con checkboxes funciona perfectamente, pero, al intentar filtrar con el input, me da este error: SyntaxError: Unexpected end of JSON input Se muestra solo cuando se introduce algo en la entrada para filtrar la tabla. El filtrado con casillas de verificación no muestra ningún error.
El error completo es:
core.js:6014 ERROR SyntaxError: Unexpected token d in JSON at position 0
at JSON.parse (<anonymous>)
at MatTableDataSource.dataSource.filterPredicate (provisioned-list.component.ts:116)
at table.js:568
at Array.filter (<anonymous>)
at MatTableDataSource._filterData (table.js:568)
at MapSubscriber.project (table.js:543)
at MapSubscriber._next (map.js:29)
at MapSubscriber.next (Subscriber.js:49)
at CombineLatestSubscriber.notifyNext (combineLatest.js:73)
at InnerSubscriber._next (InnerSubscriber.js:11)
al clicar sobre table.js linea 568:
_filterData(data) {
// If there is a filter string, filter out data that does not contain it.
// Each data object is converted to a string using the function defined by filterTermAccessor.
// May be overridden for customization.
this.filteredData =
-->568 !this.filter ? data : data.filter(obj => this.filterPredicate(obj, this.filter));
if (this.paginator) {
this._updatePaginator(this.filteredData.length);
}
return this.filteredData;
¿como puedo solucionar esto?
html:
<div fxLayout="row">
<mat-form-field class="filterField">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"
[(ngModel)]='filterValue'>
</mat-form-field>
</div>
<div fxLayout="row">
<mat-checkbox [(ngModel)]="onlineValue"
(change)="applyFilterOn('isOnline',onlineValue ? true : false)">
Online</mat-checkbox>
<mat-checkbox [(ngModel)]="offlineValue"
(change)="applyFilterOn('isOnline',offlineValue ? false : true)">
Offline</mat-checkbox>
<mat-checkbox [(ngModel)]="provisionedValue"
(change)="applyFilterOn('isProvisioned',provisionedValue ? true : false)">
Provisioned</mat-checkbox>
<mat-checkbox [(ngModel)]="deprovisionedValue"
(change)="applyFilterOn('isProvisioned',deprovisionedValue ? false : true)">
Deprovisioned</mat-checkbox>
</div>
The problem seems to be in the JSON parse (line 116--> const filterValues = JSON.parse(filter);)
my ts:
ngOnInit(): void {
this.dataSource.filterPredicate = ((data: DeviceModel, filter: string): boolean => {
const filterValues = JSON.parse(filter);
console.log(filterValues)
return (this.onlineValue ? data.isOnline === filterValues.isOnline : true) &&
(this.offlineValue ? data.isOnline === filterValues.isOnline : true) &&
(this.provisionedValue ? data.isProvisioned === filterValues.isProvisioned : true) &&
(this.deprovisionedValue ? data.isProvisioned === filterValues.isProvisioned : true);
});
applyFilterOn(column: string, filterValueOn: string): void {
this.filterValues[column] = filterValueOn;
this.dataSource.filter = JSON.stringify(this.filterValues);
}
applyFilter(filterValue: string): void {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}