2

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


1 respuesta 1

0

Al parecer estas tratando de parsear una cadena de texto común y corriente (En el caso que pones empieza con "d" y por ende, no es caracter válido). Necesitas arreglar esta linea:


 ngOnInit(): void {
        this.dataSource.filterPredicate = ((data: DeviceModel, filter: string): boolean => {
            const filterValues = JSON.parse(filter);
            console.log(filterValues)

El problema se debería solucionar omitiendo el JSON.parse.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.