Filter the angular accordion by passing a simple array value into the input

I am looking to filter my array of accordion items based on the value of the question matching the input I provide. I have tried using the filter method for this.

  this.accordionItems = [
  
   {
      "topic":"polizze",
      "question":"Le mie polizze sono attive?",
      "answer":"Lorem ipsum dolor sit amet, consectetur adipiscing… qui officia deserunt mollit anim id est laborum."
   },
   {
      "topic":"polizze",
      "question":"Come si cambia il beneficiario?",
      "answer":"Lorem ipsum dolor sit amet, consectetur adipiscing… qui officia deserunt mollit anim id est laborum."
   },
   {
      "topic":"sinistri",
      "question":"Come annullo un appuntamento?",
      "answer":"Lorem ipsum dolor sit amet, consectetur adipiscing… qui officia deserunt mollit anim id est laborum."
   }
]

 this.input = 'polizze';
    if (this.accordionItems) {
      this.accordionItems = this.accordionItems.filter(request =>
        request.question.toLowerCase() === this.input.toLowerCase());
 }
angulartypescript

Answer №1

There seems to be a misunderstanding in how the filter function is being used here. The filter function is designed to return items that match a specific condition.

To correctly filter out all items with the topic "polizze", you can try the following code:

this.filteredItems = this.items.filter(item =>
    item.topic.toLowerCase() === 'polizze');

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

What is the title of the commonly used state management approach in rxjs? Are there any constraints associated with it?

When working with Angular applications, it is common to use the following approach to manage shared states: import { BehaviorSubject } from 'rxjs'; interface User { id: number; } class UserService { private _users$ = new BehaviorSubject([]) ...

angularreduxrxjsngrxflux

The React context hooks are failing to update all references

In my project, I am working on setting up a modal with a custom close callback. To achieve this, I used a useState hook to store the method and execute it within an already defined function called closeModal(). However, I encountered an issue when attempt ...

reactjstypescriptnext.jsuse-context

Difficulty with setting up a basic Angular 5 environment

I am facing difficulties in setting up and running Angular5 on my system. Here are the steps I followed in my home directory: $ sudo npm install @angular/cli -g $ ng new my-verbsandvocab $ cd my-verbsandvocab $ ng serve However, I encountered an erro ...

angularnpmangular-cli

How can Jest be configured to test for the "permission denied" error?

In my Jest test, I am testing the behavior when trying to start a node http server with an invalid path for the socket file: describe('On any platform', (): void => { it('throws an error when trying to start with an invalid socket P ...

node.jstypescriptjestjs

Dealing with the endless looping problem in Next.js caused by useEffect

Looking to implement a preloader that spins while the content is loading and disappears once the loading is complete. However, encountering an issue where the site gets stuck on the loading page and keeps loading infinitely. I've tried multiple soluti ...

reactjstypescriptnext.jstailwind-cssdaisyui

The error message 'ReferenceError: MouseEvent is not defined' indicates that

Recently, I attempted to incorporate ng2-select into a project that relies on angular/universal-starter (TypeScript 2.x) as its foundation. (Interestingly, ng2-select worked perfectly fine when added to an angular-cli generated project.) However, upon ad ...

angulartypescriptwebpacktypescript2.0angular2-universal

Explore the potential of utilizing Reactive Forms in conjunction with storybook templates

Currently, I am working on developing some custom components and form elements that I intend to include in Storybook. To ensure completeness, I want the stories to utilize FormControl and FormGroup to demonstrate a real-world use case. Here is an example ...

angularstorybookform-controlangular-storybook

Preserve data during page refresh with the power of RxJS

In my Angular service, I have implemented a Behavior Subject that initially fetches data from the database and then updates with values from a form input. The issue I am facing is that when a user fills out the form to filter search results and refreshes ...

angularrxjs

Issue: Module not found; Typescript error encountered in a react application

I have a load_routes.js file in the node_express folder that is responsible for loading all the routes for my project. Everything was working smoothly until I decided to change the file extension from .js to .ts. Suddenly, I started encountering the follow ...

node.jsreactjstypescriptcreate-react-apppackage.json

Having trouble triggering a change event within a React component?

I'm working on a straightforward react-component that consists of a form. Within this form, the user can search for other users. To ensure the form is valid, there needs to be between 3 and 6 users added. To achieve this, I've included a hidden ...

javascriptreactjstypescript

I seem to be invisible to the toggle switch

I currently have a toggle button that controls the activation or deactivation of a tooltip within a table. Right now, the tooltip is activated by default when the application starts, but I want to change this so that it is deactivated upon startup and on ...

htmlangulartypescriptnebular

Head to the "/unauthorised" route in Angular while maintaining the current URL intact

I have a security guard that directs the user to an "/unauthorised" route when they do not have permission to access the current page (which could be any page). @Injectable() export class PermissionGuard implements CanActivate { constructor(private reado ...

angular

Update the names of the output fields within the returned object from the API

Recently I delved into nodejs and typescript to create an API using express. I attempted to return a custom object in my API structured as follows: export class Auction { private _currentPrice:number = 0; private _auctionName:string; public ...

node.jstypescriptexpress

Getting the perfect typings installed from DefinitelyTyped

In my current attempt to install typings (version 1.3.2) for the malihu-custom-scrollbar-plugin, I am facing an issue with some wrong type identification error (Error TS1110: Type expected). This error is caused by the use of string literal types syntax li ...

typescriptdefinitelytypedtypescript-typingsmcustomscrollbar

Prisma allows for establishing one-to-many relationships with itself, enabling complex data connections

I am in the process of developing a simple app similar to Tinder using Prisma. In this app, users can swipe left or right to like or dislike other users. I want to be able to retrieve matches (users who also like me) and candidates (all users except myself ...

mysqltypescriptprismaprisma2

Accessing class functions in Angular 2 and Ionic

I'm currently using Ionic with Angular 2 to develop an app. However, I'm facing an issue with the code below as I am unable to access the function leaveGroup(group) within the Dialog promise. leaveGroupTapped(event, group) { this.dialogs.con ...

angularcordovaionic-framework

Issue: Module "expose?Zone!zone.js" could not be located

Just started experimenting with Angular 2 and encountering an issue when importing zone.js as a global variable: https://i.stack.imgur.com/gUFGn.png List of my packages along with their versions: "dependencies": { "angular2": "2.0.0-beta.3", "es ...

javascripttypescriptangularwebpack-dev-server

Utilizing SCSS variables

Currently, I am in the process of developing an Angular 4 application using angular-cli and have encountered a minor issue. I am attempting to create a component that has the ability to dynamically load styling. The ComponentX component needs to utilize a ...

angulartypescriptangular-cli

React: The Material-UI autocomplete input, controlled with the React Hook Form `<controller>` component, experiences issues when the `multiple` prop is set to `true`

Currently facing challenges with managing an autocomplete MUI component using the <controller> component in react-hook-form. Take a look at the code snippet below: <Controller control={control} name="rooms" render={({ field }) =&g ...

reactjstypescriptmaterial-uiautocompletereact-hook-form

Is there a way to inform TypeScript that the process is defined rather than undefined?

When I execute the code line below: internalWhiteList = process.env.INTERNAL_IP_WHITELIST.split( ',' ) An error pops up indicating, Object is possibly undefined. The env variables are injected into process.env through the utilization of the mod ...

javascriptnode.jstypescriptecmascript-6