Seeking solutions to enhance my pipe for multi-level search functionality.
Currently, my pipe is not effectively searching through all levels, resulting in inaccurate results.
For example:
When I input 'ab', it does not display all matches with 'ab'.
The pipe only searches for non-nested elements.
Here is a link to my stackblitz: https://stackblitz.com/edit/angular-929hve
Could you update the block of code for me?
return filterKeys.some((keyName) => {
return new RegExp(filter[keyName], 'gi').test(item[keyName]) ||
new RegExp(filter[keyName], 'gi').test(item.data[keyName]) ||
filter[keyName] == "";
});
Here is the updated version:
return (
new RegExp(filter[keyName], "gi").test(item[keyName]) ||
new RegExp(filter[keyName], "gi").test(item.data[keyName]) ||
new RegExp(filter[keyName], "gi").test(item.data.data) ||
filter[keyName] == ""
);
I included an extra line to address nesting according to your data structure.
Additionally, I noticed a small mistake in your code while iterating through the keys for the search to be effective across all fields. Please replace the else block with this code:
let keys = [];
return items.filter(item => {
keys = Object.keys(item);
keys.push(...Object.keys(item.data));
return keys.some(keyName => {
console.log(keyName);
return (
new RegExp(filter, "gi").test(item[keyName]) ||
new RegExp(filter, "gi").test(item.data[keyName]) ||
new RegExp(filter, "gi").test(item.data.data) ||
filter[keyName] == ""
);
});
});
I am currently working on a Vue component where the main element is a router-link. My goal is to have the element focus when I hover over it and blur when I move my mouse away. Here is how I have set it up: <template> <router-link :to=" ...
The issue I am experiencing is unique to Chrome for Android when accessing a local website. Interestingly, the site functions perfectly on Firefox for Android but encounters problems on Chrome. Specifically, on my website , there is a download link for a ...
While trying to paint each face of a cube with a different color, I came across a helpful thread that outlines a method to achieve this: var geometry = new THREE.BoxGeometry(5, 5, 5); for (var i = 0; i < geometry.faces.length; i++) { geometry.faces ...
I have been working with the code below to select an item if it is present in the filters: <div ng-repeat="category in categories.data" ng-model="div1"> <div ng-repeat="(key, value) in category" mg-model="div1.div2"> ...
// Searching and deleting process driver.findElement(By.cssSelector("input[type='search']")).sendKeys("Diversification Rule Template"); driver.findElement(By.className("delete-template")).click(); Alert alert = driver.switchTo.alert(); Thread. ...
I have a gallery with an album-card component inside, and within that is a carousel. I noticed that when I add a list-group and set one of the items as active, it remains unblurred. Can anyone help me understand why? Here is the HTML for the gallery com ...
My specific requirement is to retrieve values returned from my aspx page in an HTML page. Thank you in advance for your assistance. <script type="text/javascript"> function getCars() { alert("Hello"); $.ajax({ type: "POST", ...
I am encountering an issue while trying to import a class into a module in my Ionic/Angular app. Upon attempting to release, the following error message appears: ERROR in : Unexpected directive 'SeedModalPage in /home/robson/Lunes/repositories/bolunes ...
How can I update an object's value in TypeScript based on a string input related to the object key? const objData = { // random value A: 11, B: 13, C: 53, innerObj: { AStatus: true, BStatus: false, CStatus: true, }, }; type Item ...
I am currently working on validating whether a username exists in the database or not. If it does exist, an error message should be displayed, and the user should be prevented from adding details to the database until they edit the username field to make i ...
Well, here's the deal. I don't have any experience with wordpress php coding at all, but I can make basic adjustments using the wordpress admin. Now I've run into an issue. I tried to use the feather lightbox js, and below is a snippet of co ...
I am working with Bootstrap Tabs where I have loaded content dynamically using jQuery's load() function. In addition, when a button is clicked, a new tab is generated automatically with a basic HTML form containing various input fields, which is then ...
UPDATE: It's come to my attention that there may have been a shift from chaining to piping in RxJS 6.x. Can anyone confirm? See more at: This is my introduction to working with RxJS streams. I'm attempting to create some basic ones, but encounte ...
In my current project, I am examining the JS code snippet below as part of creating a .d.ts file: BatchBuffer.js var Buffer = function(size) { this.vertices = new ArrayBuffer(size); /** * View on the vertices as a Float32Array for posi ...
Imagine we have a scenario like the one below: class Individual { lastName: string; firstName: string; getCompleteName(separator: string) { return this.lastName + separator + this.firstName; } } const person = ... const completeName = _.ifNo ...
Important Note: The code below utilizes the rubuxa plugin for handling JS sortables. Javascript: function querySelector(expr){return document.querySelector(expr)} var container = querySelector('.ITEST'); var sortable = Sortable.create(container, ...
In the process of overengineering a type that can match either a string or an object whose valueOf() function, when evaluated recursively, ultimately returns a string. type Stringable = string | StringableObject; interface StringableObject { valueOf() ...
I have a situation where I am trying to select multiple checkboxes on different rows in my application. Each time I click on one checkbox, it gets selected just fine. However, when I click on another checkbox in a different row, the previously selected che ...
Recently diving into the world of Javascript and React, I decided to challenge myself by creating a basic calculator. My strategy was to separate the calculator logic into its own class. As I am currently testing it out, I encountered a peculiar issue. It ...
I am currently working on a project to develop a platform where users can add scenes to YouTube videos by providing the scene name and start & pause time. I have already created an interface that allows users to input this information, but I am now lookin ...