Error: Attempting to access property 'toLocaleLowerCase' of an undefined value

I've been working on a custom pipe following the instructions carefully, but I keep encountering an error when trying to filter my list.

Below is the code for my custom pipe:


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

This is the interface used:


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

The component associated with this setup:


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

        // Component and initialization details here...
    

Lastly, here is a snippet of the template:


        <!-- Template code here -->
    

Can anyone pinpoint what might be causing the issue in this scenario?

Answer №1

One potential issue lies in the spacing of the following code:

.indexOf(filterBy) ! ==-1)

The correct formatting should be as follows:

.indexOf(filterBy) !== -1)

Please pay attention to the absence of spaces between the exclamation mark and the double equals sign.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I encountered an infinite loop issue with Material UI tabs when loading my component within the navigation bar (AppBar > TabPanel)

I am currently working on an application for a school project, and I'm incorporating Material UI into it. Following the official documentation provided on their website. This is the link I have been referring to: Code. My goal is to load a new comp ...

Is the performance of `fillRect` hindered when painting on a 3D model?

Currently, I am in the process of developing a painting-type application using three.js/canvas. My goal is to enable users to paint directly onto a 3D model, updating the UV map accordingly. https://i.sstatic.net/DfMvB.png While I have achieved the desi ...

"Building a tree structure from a one-dimensional array in Angular: A step-by-step

I would like to implement a tree structure in Angular using flat array data and I am willing to explore different packages for rendering the tree. Users should be able to click on a node to view details such as node ID and title. The tree should initially ...

What is the best way to assign a title to every div element and showcase 5 div items in a single line?

I am using a "for loop" to call getjson multiple times and receive a response to display items on sale inside a div. Currently, my code displays the item name to the right of each frame, but I want the item name to appear below the iframe, similar to the c ...

Remove focus from input field after submitting in a project using Typescript and React with react-hook-form

I'm currently working on a TS-React project and encountering an issue with barcode scanning in my inputs. I am using react-hook-form along with the useForm Hook. The form consists of one input-text field and a submit button, both within a global form. ...

What sets apart the process of installing AngularJS and AngularJS Core using NuGet?

I am curious about the difference between these two packages in my packages.config file. Would it be advisable to uninstall one of them? <?xml version="1.0" encoding="utf-8"?> <packages> <package id="angularjs" version="1.3.15" targetFr ...

Application route is failing to direct to the HTML page

On my MEAN stack website, I am trying to make the browser navigate to a file named 'findCable.html' but it keeps directing to 'singleCable.html'. I have double-checked the angular routing file and backend routes, but can't see ...

Having trouble with the npm Fluid Player installation

I am attempting to integrate Fluid Player into my Angular application Using - npm i fluid-player However, I'm encountering this error ...

how to display ajax response in webpage using jQuery

I need to perform multiple ajax calls in a for loop, with each call returning a text/html response that needs to be printed. Here is the code I have implemented: function printBill(printBills, lastBillNo, type,taxType,outletId,date){ var printableObjects ...

Unable to retrieve the value of a specific property using _.map based on its property name

I'm currently facing a challenge with my app that utilizes MongoDB as its database. Specifically, I am having trouble extracting property values from array variables. Despite using a _.forEach method to confirm the presence of data, I encountered diff ...

Display JSON data in an HTML table by utilizing the AJAX response

Here is a sample JSON data: [ { "datetime": "2020-07-01T00:00:00", "params": [ { "parameterName": "Temperature", "value": 20, "color": "Green ...

Can you explain the meaning of `(error: T) => void` in error?

I've come across this particular syntax in a few Typescript libraries and I am trying to grasp its meaning. error?: (error: T) => void I have seen it being used like so: class SomeClass { someFunction(error?: (error: T) => void){ } ...

Exploring the capabilities of a VueJS-compatible product tour library

I am currently working on implementing a feature intro tutorial for my web application, similar to what can be done with intro.js. However, I am encountering an issue where nothing seems to happen when using intro.js - no error messages or tour messages ar ...

Is the Wrapper created by the combination of React, JavaScript Arrow functions, and Classes

I stumbled upon a website at: After implementing the solution successfully, I found myself puzzled by the javascript code. There was a snippet in the AnimatedWrapper.js class that caught my attention: const AnimatedWrapper = WrappedComponent => class ...

"Flow-down" personalized JavaScript events

Exploring the concept of custom events in JavaScript. Per MDN, the CustomEvent constructor allows for the event to "bubble up" (default is false): https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#CustomEventInit Here's an example: // s ...

Error with font import causing hydration issue in NextJS

Font integration dilemma: import { Lexend } from 'next/font/google'; const lexend = Lexend({ subsets: ["latin"] }); Incorporating the font: const SplashPage = () => { ... return ( <html lang="en" className={lexend.cla ...

Prevent automatic jumping to input fields

Can someone help me with a problem related to the html input tag or primefaces p:input? I am facing an issue where the cursor always automatically jumps into the input field. The height of my page is such that scrolling is required, and the input field i ...

Using AngularJs to have two ui-views on a single page

As a beginner in AngularJs, I encountered an issue with having two ui-views on the same page. When I click a button to show the view for goals, both the form for goals appear in ui-view 1 and ui-view 2 simultaneously. I have been working with states but I ...

Having trouble receiving accurate intellisense suggestions for MongoDB operations

Implementing communication between a node application and MongoDB without using Mongoose led to the installation of typing for both Node and MongoDB. This resulted in the creation of a typings folder with a reference to index.d.ts in the server.ts file. In ...

Sending PHP variable to xmlhttp.responseText

I haven't come across this specific situation before, so I thought I would ask for help. My JavaScript code is using AJAX to call a PHP file, run the script in it, and then return a concatenated PHP variable via xmlhttp.responseText to alert that resp ...