Dynamically Returning Multiple Functions in Javascript: A Comprehensive Guide

I apologize if my question was unclear. Let me explain the issue I am facing.

I am currently working on implementing a search functionality in a table, where users can search in specific columns.

Currently, I am manually checking which checkboxes are selected and then executing the appropriate search function based on that.

However, I would like to make this process dynamic so that I don't have to modify the code every time a new column is added to the table. This is where I'm encountering difficulties.

Here is the code snippet I am using:

        vm.$watch('searchTerm', function (searchTerm) {
            // Code logic here
        });

I attempted to use a loop for creating a more efficient solution, but I am struggling to return the functions within the loop. Adding a return statement before the loop didn't help either.

        vm.$watch('searchTerm', function (searchTerm) {
            // Updated code logic with loop
        });

This might be a simple issue for some of you, so I apologize if I am missing something obvious. I have been stuck on this problem for the past 2 hours...

EDIT: I want to clarify the function mentioned in the code:

        const contains = (value, searchTerm) => {
            // Contains function logic
        }

2nd EDIT: After receiving feedback from a member, I realized that even the initial version of the code is not functioning as intended. There is an option for multiple selection, so if the first two checkboxes are selected, the search should be performed in both columns simultaneously.

Answer №1

One way to approach this is to loop through the entire dataset like so:

vm.$watch('searchTerm', function (searchTerm) {
  if (!searchTerm) {
    vm.filteredTable = angular.copy(vm.table);
  } else {
    searchTerm = searchTerm.toLowerCase();
    return vm.filteredTable.rows = vm.table.rows.filter(row => 
           vm.searchFilter.some((filter, index) => filter && contains(row[vm.table.columns[index].value])))
  }

Utilizing Array.prototype.some allows you to check if any of your filters match with the row in question.

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

Encountering a fatal error in the Next.js application: "Mark-compacts near heap limit allocation failed issue is hindering the smooth

When I'm working in Next.js, I often encounter the issue of not being able to run my project after work. https://i.stack.imgur.com/IA5w3.png ...

Sending information through a form in html to a server via AngularJS Http Post

Seeking assistance with a posting issue related to an AngularJS form. Despite using ng-submit and ng-click for the function, it's not functioning as expected. Can anyone offer guidance? <form method="post" class="sky-form" name="form"> < ...

What is the proper way to utilize a template literal within an import declaration?

Upon executing the following line: import stats from `./${process.env.STATS}` An error message is shown: Parsing error: Unexpected token ` To successfully load the module, use the following expression: const stats = require(`./${process.env.STATS}`) ...

What is the best way to apply a conditional binding with v-model in Vue.js?

When working with JavaScript, you can utilize object spreading to include optional values like shown below: const payload = { name: "Joseph", ...(isMember && { credential: true }) }; In React, passing props optionally in JSX is as simple as this: &l ...

What is the best way to open multiple tabs simultaneously on Google Chrome?

I'm in the process of developing a coupon product and I want to be able to open 4 tabs with just one click of a button. Interestingly, this works smoothly on Firefox, however, when it comes to Chrome, only 2 links are able to open while the other two ...

Display and conceal various elements in Vue.js using a data list

I'm a beginner in Vue.js, currently using Vue+Webpack. I am trying to make each link display data based on their respective ids when clicked, and match with the show attribute. I have created this functionality in a .vue file. export default { el ...

What is the best method for storing objects within a Mongoose schema?

Within my node.js project, I am working with three variables: var name = 'Peter'; var surname = 'Bloom'; var addresses = [ {street: 'W Division', city: 'Chicago'}, {street: 'Beekman', city: 'N ...

Troubleshooting Angular services: encountering an error message stating that the module is

I've been working on incorporating tests into my example project and decided to try using Jasmine standalone. I downloaded it, added it to my html files, and created a spec.html file to run all the tests. However, when I tried to view the results in t ...

Guidelines for removing the contents of a div upon clicking a radio button

When a radio button is clicked, the associated div with different input fields will be displayed. I am looking for a way to clear the contents of other divs when a new div is displayed. Any assistance on this matter would be greatly appreciated! ...

Unable to save drag and drop elements in localStorage using angularjs

Greetings! I am currently working on a straightforward application that allows users to assign tasks through a drag and drop feature. This application utilizes the angular-dragdrop.min.js file. I have encountered an issue when storing data in local storag ...

Issue with Nav Bar Toggle not changing text to white color

Query I'm baffled as to why the text in the navigation bar (when opened with the Burger Menu) refuses to turn white. I've exhausted all efforts to change the color to white. Please assist me in pinpointing why the text remains unaffected when t ...

Stop scrolling when hovering over an element

I'm currently working on animating a scrolling div and have managed to get the trigger to fire, scroll, and stop on click and/or mouseenter. However, I am now looking to make it pause when the mouse hovers over the div instead of stopping altogether. ...

What is the best method for ending a function in jQuery?

Hey everyone, I have been facing an issue with my jQuery code. I have written some code that triggers an ajax request when a button is clicked. However, the problem arises when clicking the yes or no confirmation buttons within the same function. The issue ...

What is the best way to switch back and forth between showing and concealing JavaScript-generated images?

Though I've been gone for a while, I always find my way back, don't I (even if no one noticed)? The Goal in Mind All I really need are some images, grouped together with a main image. This main image will always be visible and will also act as ...

How to pause a loop temporarily before proceeding with the next iteration

I am facing a challenge where I want to trigger two events simultaneously, but only one event should be allowed to continue at a time. If an event is already in progress, I need the ability to forcefully stop it and allow the other event to take control. S ...

The Vue component's data function is currently devoid of content

I've defined a Vue.js component as shown below: module.exports = Vue.component('folder-preview', { props: ['name', 'path', 'children', 'open'], template: `... `, methods: mapActions([ ...

"Empty $stateParams Issue Encountered in Angular UI-Router While Using My Directive

I have developed a unique directive in my angular application for a custom navbar. The controller of this directive utilizes $stateParams to access a variable named lang, as shown below: .config(function($stateProvider, $urlRouterProvider, LANG) { $u ...

Maintain the highlighted background of the selected slot in react-big-calendar even after the selection process is completed

Currently, the default behavior is that when a slot is selected, it is highlighted in gray. However, once the selection is stopped, the highlighting disappears from the calendar fields. If we were to open a modal upon selection, this may not be necessary. ...

Selecting a radio button using information retrieved from a JSON source

I am working with a set of radio buttons that send data to the database in the form of 0 and 1 (1=Yes, 0=No). I want to retrieve this information from the database and highlight the appropriate radio button based on the saved value. Here is my code snippet ...

Conceal an element when a click event occurs on the document using AngularJS

I currently have a login form on my website. Once a user logs in, their username is displayed on the page. When hovering over the username, a logout link appears. However, when I click anywhere on the document, the logout link does not hide as expected. I ...