CODEWITHSUNDEEP
javascriptangularangular5
RxDev
RxDev

Reputation: 295

Angular 5 : ERROR TypeError: Cannot read property 'toLowerCase' of undefined

I am having this error every time I try to filter a column of a column of a table.I fetch my data from a FireStore cloud collection and the the field auteur is well defined in each documents.

here's what my component looks like

import { Component, OnInit, ViewChild} from '@angular/core';

import { Router } from '@angular/router';
import { DataService } from '../../services/data.service';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore } from 'angularfire2/firestore';
import { AuthentificationService } from '../../services/authentification.service';

@Component({
  selector: 'app-data-preview',
  templateUrl: './data-preview.component.html',
  styleUrls: ['./data-preview.component.css']
})
export class DataPreviewComponent implements OnInit {
  rows = [];
  temp = [];
  selected: any[] = [];
  columns;
  panelOpenState = false;
  id: any;

  @ViewChild(DataPreviewComponent) table: DataPreviewComponent;

  constructor(private router: Router, private dataService: DataService,
     private afs: AngularFirestore,public authService: AuthentificationService) { 
      this.dataService.getData().subscribe((datas) => {
        this.temp = [...datas];
        this.rows = datas;
        console.log(datas);
      });
     }

  ngOnInit() {

  }

   updateFilter(event) {
    const val = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.nom.toLowerCase().indexOf(val) !== -1 || !val;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  updateFilter1(event) {
    const val1 = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.prenom.toLowerCase().indexOf(val1) !== -1 || !val1;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  updateFilter2(event) {
    const val2 = event.target.value.toLowerCase();
    // filter our data
    console.log(val2);
    const temp = this.temp.filter(function(d) {
      return d.auteur.toLowerCase().indexOf(val2) !== -1 || !val2;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }



  updateFilter3(event) {
    const val3 = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {

      return d.departement.toLowerCase().indexOf(val3) !== -1 || !val3;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  updateFilter4(event) {
    const val4 = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.commune.toLowerCase().indexOf(val4) !== -1 || !val4;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  updateFilter5(event) {
    const val5 = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.typeF.toLowerCase().indexOf(val5) !== -1 || !val5;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  // onSelect({ selected }) {
  //   console.log('Select Event', selected, this.selected);
  // }

  onActivate(event) {
    if (event.type === 'click') {
      console.log('Event: activate', event);
      this.id = event.row.id;
      this.router.navigate(['/data', this.id]);
    }
  }
}

and the component associated with it

<!-- panneau de recherche -->
<div *ngIf="authService.user | async">
<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
       <b> Panneau de recherche </b>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="Nom" id="nom" (keyup)="updateFilter($event)">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Prénom" id="prenom" (keyup)="updateFilter1($event)">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Auteur" id="auteur" (keydown)="updateFilter2($event)">
    </mat-form-field>
  
    <mat-form-field>
      <input matInput placeholder="Département" (keyup)="updateFilter3($event)">
    </mat-form-field>

      <mat-form-field>
          <input matInput placeholder="Commune" (keyup)="updateFilter4($event)">
        </mat-form-field>
    
        <mat-form-field>
          <input matInput placeholder="Formation" (keyup)="updateFilter5($event)">
        </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
  </mat-expansion-panel>
</mat-accordion>
<!-- fin panneau de recheche             -->
<div class="table" style="width: 100%">
  <ngx-datatable
  class="material"
  [headerHeight]="50"
  [columnMode]="'force'"
  [rowHeight]="'auto'"
  [footerHeight]="50"
  [count]="true"
  [limit]="50"
  [rows]="rows"
  [selectionType]="'single'"
  (activate)="onActivate($event)"
    >
    <ngx-datatable-column name="Nom" class="name">
      <ng-template ngx-datatable-cell-template let-value="value" >
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Prenom">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name='Telephone'>
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name='Auteur'>
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Departement">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Commune">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="TypeF">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Statut">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>
</div>

I tried to console.log(auteur.id) and it displayed the content in the console.

PS: I have tried to filter other fileds of my document it works perfectly.

Any idea of how to solve this?

Upvotes: 2

Views: 7675

Answers (2)

cassmtnr
cassmtnr

Reputation: 947

When this happens I usually check if the data is there before, in your case:

if(d && d.auteur){
  return d.auteur.toLowerCase().indexOf(val2) !== -1 || !val2;
}

Upvotes: 7

Gourav Singla
Gourav Singla

Reputation: 69

In angular material, there is no event.target.value, but instead event.value. You should try using this.

updateFilter2(event) { 
    const val2 = event.value.toLowerCase(); // filter our data 
    const temp = this.temp.filter(function(d) { 
        if(d && d.auteur){ 
            return d.auteur.toLowerCase().indexOf(val2) !== -1 || !val2; 
        } 
    }); 
    this.rows = temp; 
}

Upvotes: -3

Related Questions