CODEWITHSUNDEEP
javascriptangulartypescriptangular-pipe
RxDev
RxDev

Reputation: 295

TypeError: Cannot read property 'toLocaleLowerCase' of undefined

I am trying to create a custom pipe I have followerd the instructions correctly but it keep giving me that error when I try to filter my list

here's my pipe code 

import { Pipe, PipeTransform } from '@angular/core';
import { Icandidat } from './candidat/icandidat';

@Pipe({
    name :'personFilter'
})

export class PipeFilter implements PipeTransform{


    transform(value: Icandidat[], filterBy : string) : Icandidat[] {
        filterBy = filterBy ? filterBy.toLocaleLowerCase(): null;
        return filterBy? value.filter((person : Icandidat)=>
            person.candidatNom.toLocaleLowerCase().indexOf(filterBy) ! ==-1) : value; 
     }
}

here is my interface 

export interface Icandidat {
    prog1 : string ;
    progName1 : string ;
    progEl1 : string ;
    candInfo : any [];
    filterBy : string ;

    candidatID : number;
    candidatNom : string;
    canditatPrenom : string ;
    candidatParti : string;
    candidatDepartement : string;
    candidatCommune : string ;

    candidats : Icandidat;
    errorMessage : string;


}

my component

import { PaeServiceService } from '../pae-service.service';
import { Icandidat } from './icandidat';
import { NgModel } from '@angular/forms/src/directives';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-candidat',
  templateUrl: './candidat.component.html',
  styleUrls: ['./candidat.component.css'],
  providers : [PaeServiceService]
})
export class CandidatComponent implements OnInit {
    prog1 : string ="Programme d'Appui aux Elections";
    progName1 : string ="Enquête sur les candidats";
    progEl1 : string ="Listes des candidats ciblés";
    candInfo : any [];
    filterBy : string ="Ronny";

    candidatID : number;
    candidatNom : string;
    canditatPrenom : string ;
    candidatParti : string;
    candidatDepartement : string;
    candidatCommune : string ;

    candidats : Icandidat;
    errorMessage : string;

    constructor (private _candidatService : PaeServiceService){

    }

    ngOnInit(): void {
      this._candidatService.getCandidatInfo()
            .subscribe(candidats => this.candInfo = candidats,
            error => this.errorMessage = <any>error);
    }


}

and my template 

 <table class="bordered highlight" *ngIf='candInfo && candInfo.length'>
                <thead>
                  <tr >
                      <th>Nom</th>
                      <th>Prénom</th>
                      <th>Parti Politique</th>
                      <th>Département</th>
                      <th>Commune</th>
                  </tr>
                </thead>

                <tbody>
                  <tr *ngFor = 'let candidats of candInfo | personFilter : filterBy'>
                    <td>{{candidats.nom}}</td>
                    <td>{{candidats.prenom}}</td>
                    <td>{{candidats.parti}}</td>
                    <td>{{candidats.departement}}</td>
                    <td>{{candidats.commune}}</td>
                  </tr>

                </tbody>
          </table>

Any idea of what is causing this?

Upvotes: 2

Views: 8092

Answers (1)

DeborahK
DeborahK

Reputation: 60528

The spacing here may be the problem:

.indexOf(filterBy) ! ==-1)

It should be:

.indexOf(filterBy) !== -1)

Notice that there are no spaces between the bang and the double equals.

Upvotes: 2

Related Questions