I am currently working on implementing data filtering in my project. The data is being passed from a child component to a parent component as checkboxes. Can anyone guide me on how to achieve this filtering process

Below is the code I have written to filter data based on priorities (low, medium, high).

The variable priorityArr is used to store the filtered data obtained from "this.data".

The following code snippet is from the parent component, where "prio" is the variable receiving data from the child component.

Although I can successfully retrieve data in the console, I am facing difficulty displaying it on the screen and utilizing the "filter" operator from "rxjs" for this purpose.

priorityArr:any;
  //used for checkbox filtering purpose
  selectedCheckBoxFilter(prio:any){
    console.log('demo --> ',prio)
    console.log("prioLevel parent ",prio.priorityLevel)

      console.log("priority array -->",this.priorityArr);
      for(let i=0;i<this.data.length;i++){
        if(this.data[i].priority==prio.priorityLevel){
          if(prio.canEnable){
            console.log(this.data[i]);
            this.priorityArr.push(this.data[i])
          }
        }
      }

  }

prio.priorityLevel is the value, and prio.canEnable is used to determine if the checkbox is active. My data is in JSON array format.

this.priorityArr.push(this.data[i])

When trying to push data using the above line, I encounter the error:

TypeError: Cannot read properties of undefined (reading 'push')

Answer №1

The RxJs filter operator is specifically designed to allow the stream to emit values that meet the filter criteria, rather than directly filtering arrays. To filter arrays, you should use the filter method on the array itself.

selectedCheckBoxFilter(prio:any){
  this.priorityArr = this.data.filter(d => d.priority === prio.priorityLevel);
}

By using the filter method in this way, a new array is created with only the elements that satisfy the filter condition.

If you are dealing with an observable that emits an array and you need to filter its values, you can achieve this by using the RxJs map operator to emit a new filtered array based on the original array's filter function.

arrayObservable$.pipe(
  map(array => array.filter(item => trueToKeepFalseToDiscard))
)

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

Retrieve a value from a list in robot automation framework

I am trying to retrieve the values from a list that I have declared called @{EMAIL_LIST with 3 values in it) My code snippet looks like this: : FOR ${a} IN RANGE 0 3 \ Input Text id=username @{EMAIL_LIST}[a] However, I am encou ...

Preserve a data point without causing any alterations

I am working with a device that continuously sends values until it is stopped. These values are then saved inside an array. deviceMonitoring( device2 ){ // In this function, I populate the arrayTimestamp and then copy the first value. this.arrayElement = t ...

I am unable to modify values using ngModel

I am struggling to update the value in my service.year.ts file but it seems impossible... <select name="selectedyear" [disabled]="disabledPeriod" [(ngModel)]="selectedyear" (ngModelChange)="onChangeYear()"> <option [ngValue]="selectedyear" ...

`Zooming and scrolling feature within a masked image`

I'm struggling to achieve a scrolling zoom effect similar to the website mentioned below, but I can't seem to get it to fully zoom. Additionally, when I try to zoom in on a clipped shape or text while scrolling, the entire div ends up scrolling ...

Remove the underline from links in gatsbyjs

When comparing the links on (check source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), they appear without an underline. However, on my blog (source code here: https://github.com/YikSanChan/yiksanchan.com), all links are un ...

Stop repeated form submissions in Angular using exhaust map

How can we best utilize exhaust Matp to prevent multiple submissions, particularly when a user is spamming the SAVE button? In the example provided in the code snippet below, how do we ensure that only one submission occurs at a time even if the user click ...

Navigating to a specific div within a container with vertical overflow in an Angular application

I am working on an angular application where I have a left column with a scrollable div that has overflow-y: auto;, and a right column with bookmark links that jump to sections within the scrollable container. I am currently facing two challenges: 1 - Co ...

Is there a specific directive in Angular that allows for variable declarations using the "

This interesting piece discusses the usage of a let-name directive in the template: <ng-template #testTemplate let-name> <div>User {{ name }} </div> </ng-template> Can anyone tell me if this is a part of the standard ang ...

Discovering the exact distance between a 'li' and a 'div' element

Currently, I am in the process of converting HTML to JSON. Here is an example of the HTML I am working with: <div class="treeprofit" id="divTreeViewIncomeDetails" style="height: auto;"> <li><span class="fa fa-folder-open highlight" ...

Modal's ng-click not triggering component's function

I am currently working on resolving an issue. My choice to use AngularJS is intentional, as I prefer not to load the entire NPM of Angular. Additionally, we heavily rely on Razor Syntax for the Web Layer. Implementation in Create.cshtml file <button ...

Does altering HX-GET in JavaScript have no impact on the outcome?

I need assistance with implementing HTMX in my FastAPI application that uses Tailwind and MongoDB for the database. Here is the form I am working with: <form id="currencyForm" hx-get="/currency_history_check/EUR" hx-target="#re ...

What is the best way to streamline JSON file data by selectively extracting necessary information?

After exporting my user data from Firebase, I am looking to streamline the JSON file by filtering only the necessary fields for my data model. The format of the file obtained from Firebase is as follows: { "Users": { "00uniqueuserid3& ...

Angular 6 issue: Data not found in MatTableDataSource

Working on implementing the MatTableDataSource to utilize the full functionality of the Material Data-Table, but encountering issues. Data is fetched from an API, stored in an object, and then used to create a new MatTableDataSource. However, no data is b ...

Unable to access the FormControl instance directly. It is not possible to read the property 'invalid' of an undefined value

Accessing in Angular docs is not the same as before, you must first grab the FormGroup instance and then find the FormControl instance within it. I wonder why? This example works: <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div class=" ...

Converting MiniZinc CSP to JSON using a workaround for iterating through arrays in JavaScript

Utilizing the node.js module "Governify CSP Tools" to tackle a CSP issue has been challenging. Despite following the guidelines on defining an array from the CSP model schema (https://www.npmjs.com/package/governify-csp-tools), I have encountered syntax er ...

Is it true that Javascript does not allow for saving or outputting actions?

After coming across this question, I discovered a way to extract a specific element from a Google translate page using Javascript. However, I also learned that it is nearly impossible to directly save something to the clipboard in Javascript without user i ...

Tips for accessing CSS properties on the img tag

I could use some assistance with CSS. I am in the process of creating a tree structure using many <ul> and <li> tags. The issue arises when I have multiple <li> elements with a specific class, each containing an <img> tag. How can ...

My program contains redundant sections that are being repeated multiple times, and I am unsure of how to remedy this issue

This particular payment gateway relies on a paid market for processing transactions. Unfortunately, there seems to be an issue where multiple error messages are being triggered during the payment verification process. The errors include: ❌ | An error h ...

What sets response.setHeader apart from response.writeHead?

When it comes to sending a JSON response from my Nodejs server in my application, I have discovered two different methods. However, I am unsure about the distinctions between them. The first method involves var json = JSON.stringify(result.rows); respons ...

Tips for verifying the presence of an active session after closing the browser

Here is my situation: When a user logs into the app and then opens another browser window, they are already authenticated thanks to express-session, bypassing the login page. This pattern continues for subsequent browser windows. The issue I am facing no ...