Angular 2: Navigating Through Filters

Currently, I am following an older Angular tutorial on Pluralsight that instructs me to input the code below:

    performFilter(filterBy: string): IProduct[] {
    filterBy = filterBy.toLocaleLowerCase;
    return this.products.filter((product: IProduct) => product.productName.toLocaleLowerCase.indexOf(filterBy) !== -1);
}

This code is meant to filter a user search by displaying results containing the letter they typed. However, I am encountering a few errors:

1: [ts] Type '() => string' is not assignable to type 'string'. (parameter) filterBy: string

2: [ts] Property 'indexOf' does not exist on type '() => string'. any

Since I am new to TypeScript, I am unsure if I need to cast these variables or if there is a different solution altogether.

javascriptc#angulartypescriptfilter

Answer №1

ConvertToLowerCase is a method that should be invoked in order to retrieve the string in lowercase:

interface IItem { itemName: string}
function applySearchFilter(filterTerm: string): IProduct[] {
    filterTerm = filterTerm.ConvertToLowerCase();
    return this.items.filter((item: IItem) => item.itemName.ConvertToLowerCase().indexOf(filterTerm) !== -1);
}

Answer №2

One way to address this issue is by employing the toLowerCase() method

performFilter(filterBy: string): IProduct[] {
    filterBy = filterBy.toLowerCase();
    return this.products.filter((product: IProduct) => product.productName.toLowerCase().indexOf(filterBy) !== -1);
}

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

Mastering Bash execution using commander.js

Is there a way to execute basic bash commands such as rm -rf directory or echo whatever using commander.js? ...

javascriptnode.jscommand-line-interfacenode-commander

Using jQuery, disregard elements that are not hidden

Currently, I am working with a jQuery validator and I am attempting to utilize the ignore: ':hidden:not feature for all controls that contain an ID with " selecting" in it. Here is my current code snippet: sb.AppendLine(@" ignore: ':hidden: ...

c#jqueryasp.net

Can Recharts Js be used to show bars using two different values?

I'm currently working on representing an array in a chart using the Recharts Js library. The Y axis should represent the cost property, while the X axis should represent the volume property. The client has requested a bar chart style for the visualiza ...

javascriptreactjschartsbar-chartrecharts

Dynamic sliding form using jquery and javascript

Currently, I am in the process of developing a survey website that presents questions one by one. Upon selecting an answer and submitting it, the current page will smoothly transition to the next question. I have been exploring methods to achieve this fun ...

javascriptjquery

What is the best way to convert HTML into a React component?

This is the situation I am facing : 1) The application requests a CMS (Content Management System) for page contents. 2) The CMS responds with "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>" 3) The applicat ...

javascripthtmlreactjscompilationcontent-management-system

Confused about the functionality of the map feature in Angular

I am new to Angular and currently working on an application that utilizes the typeahead functionality. I have set up a HTTP call through my Express backend on GCP to fetch search results from the TMDB database based on a search keyword. this.http .ge ...

angulartypescripthttpangular-httpclient

The text color remains the same even after the method has returned a value

I have a vuex query that returns a list of books. I want to display each book with a specific color based on its status. I tried using a method to determine the color name for each book and bind it to the v-icon, but it's not working as expected - no ...

javascriptvue.js

What steps can I take to stop my React child component from fetching data each time it re-renders or mounts?

Before delving into the code, let me provide a brief overview of the question at hand. https://i.sstatic.net/oRc7m.png The image above showcases a work in progress Next.js application that displays the status of my Philips Hue lights by interacting with ...

javascriptreactjs

Troubleshooting a jQuery gallery slider glitch

I have implemented a photo gallery from Codrops to showcase images on my website. Instead of manually inputting the image links into the html, I have utilized a PHP script to dynamically display images from a specific directory. My goal is to trigger the p ...

javascriptjquerygallery

I'm struggling with an issue of being undefined in my React.js project

This code snippet is from my app.js file import React, { useState, useEffect } from "react"; import { v4 as uuid } from "uuid"; import "./App.css"; import Header from "./Header"; import AddContact from "./AddCo ...

javascriptreactjsproject

Can Sync blocking IO be implemented solely in JavaScript (Node.js) without the use of C code?

Is JavaScript intentionally designed to discourage or disallow synchronous blocking I/O? What is the reason for the absence of a sleep API in JavaScript? Does it relate to the previous point? Can browsers support more than one thread executing JavaScript? ...

javascriptnode.js

Can anyone tell me what could be causing issues with my Angular 13 Subscription?

I've been struggling with this issue all night, and I can't seem to find where my mistake lies. Despite trying various approaches, I have yet to achieve the desired outcome. My project is built using Angular 13. Here is my NetworkService: import ...

angularobservable

Anticipating the execution of pool.query within a callback function in the Express framework

Within an Express post endpoint, I am utilizing crypto.generateKeyPair. After generating the key pair, I wish to store it in my database and then return the ID of the inserted row within the same endpoint. Here is the code snippet for the endpoint: app.p ...

javascriptnode.jsexpresspool

Ways to require semicolons in a Typescript interface

When declaring a TypeScript interface, both , (comma) and ; (semicolon) are considered valid syntax. For example, the following declarations are all valid: export interface IUser { name: string; email: string; id: number; } export interface IUser { ...

javascripttypescript

Cease the continuous scrolling of the display element now

I'm having trouble with my progressbar animation when scrolling. It seems to run multiple times instead of just once. I apologize if there's an error in my code. Could someone please assist me? This is the code I am using: <div class="demo- ...

javascriptjqueryscrollprogress-bar

Guide on retrieving file information after transmitting it to another PHP file through Ajax

I have written code to upload a file and send it to a php page. I would like the response to be an array containing information about the uploaded file such as name, size, type, etc. I am using the "POST" method for uploading the file. Is this approach cor ...

javascriptphpajaxfile

A TypeScript interface creating a type with optional keys of various types while enforcing strict null checks

I am attempting to devise an interface in typescript that resembles the following: type MoveSpeed = "min" | "road" | "full"; interface Interval { min?: number, max?: number } interface CreepPlan { [partName: string] : Interval; move?: MoveSpe ...

typescript

What is the best way to create height segments from a cylinder in three.js?

My current project involves a cylinder that is divided into multiple height segments, with the number of segments depending on the specific data. Each height segment contains a value that I want to use for extruding the entire circle at that particular hei ...

javascriptthree.js

Issue with getStaticProps in Next.js component not functioning as expected

I have a component that I imported and used on a page, but I'm encountering the error - TypeError: Cannot read property 'labels' of undefined. The issue seems to be with how I pass the data and options to ChartCard because they are underline ...

javascriptreactjstypescriptnext.js

What is the best way to update a dropdown list without having to refresh the entire page

I'm currently working on a page that contains two dropdown lists: <asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" name="searchPhys" style="width: 365px;" class="default ...

c#asp.net