Find elements in an array that match certain key values

Currently, I am working with an array that requires me to filter out specific keys without looping through them. I have created separate filters for each key needed:

this.filteredCampaigns = this.allCampaigns.filter(
  (item) => item.status?.includes(translatedStateName)
);
this.filteredCampaigns = this.filteredCampaigns.concat(this.allCampaigns.filter(
  (item) => item.description?.toLowerCase().includes(filteredString)
));
this.filteredCampaigns = this.filteredCampaigns.concat(this.allCampaigns.filter(
  (item) => item.type?.toLowerCase().includes(filteredString))
);
this.filteredCampaigns = this.filteredCampaigns.concat(this.allCampaigns.filter(
  (item) => item.code?.toLowerCase().includes(filteredString))
);

I am looking for a way to combine or chain these filters instead of repeating the code. I have attempted:

this.filteredCampaigns = this.filteredCampaigns.concat(this.allCampaigns.filter(
  (item) => item.description?.toLowerCase().includes(filteredString)
    && item.type?.toLowerCase().includes(filteredString)
    && item.code?.toLowerCase().includes(filteredString)
));

Unfortunately, this approach does not work. Can someone provide guidance on how to achieve this?

Edit: Thank you for the comments, I realized that to combine filters, I needed to replace && with ||.

javascriptarrays

Answer №1

Check out this solution:

this.filteredCampaigns = this.allCampaigns.filter(
    (campaign) => campaign.description?.toLowerCase().includes(filteredString)
        || campaign.type?.toLowerCase().includes(filteredString)
        || campaign.code?.toLowerCase().includes(filteredString)
)

(By the way, you can skip using the .concat method.)

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

Although JavaScript Handlebars does not show any errors, it fails to function properly

I've been attempting to update text on my page using handlebars, but unfortunately, it's not functioning correctly and there are no error messages being displayed. The code below is triggered once the user clicks the submit button <button ty ...

javascriptjqueryajaxhandlebars.js

Issues with tabbed navigation functionality in jQuery

I'm encountering some difficulties with the tabbed navigation I created using CSS. Essentially, when a button is clicked, it should remove the hidden class from one div and add it to the other. However, what actually happens is that the div which sho ...

javascriptjqueryhtml

JavaScript regular expression for detecting valid currency values

I am encountering an issue with removing decimal values from a monetary amount retrieved from a JSON feed: For example, if I have: 150,000, I want to display it as just 150 Here is the code snippet I am using: $.getJSON('/static/js/datatest.json&ap ...

javascriptjqueryajaxregexjson

What is the best way to send an array to a modal?

Utilizing Axios for retrieving a list of countries from a REST API, I have implemented modals with each displaying the name and flag of a country. Upon clicking on any country name, the console will log the selected country. I am looking to pass the last ...

javascriptvue.js

Exploring scope in an angular service

My goal is to show a success message after clicking a button. Since I need this functionality in multiple controllers, I decided to implement it using a service. However, I am facing issues accessing the scope. index.html <div ng-controller="uploadCon ...

javascriptangularjs

The styling of MUI components adapts when the Navigate component in React Router is initialized

Incorporating React Router into my application has led to an unexpected side-effect while implementing the <Navigate to="/"> component (which goes to <AthleteHomepage />) upon state change. Currently, I haven't set up dynamic sta ...

javascriptreactjsmaterial-uireact-router

Implement code to execute exclusively on the initial success of react-query

I have a unique scenario where I need to utilize standard useQuery behavior, while also executing a piece of code only on the initial onSuccess event. Although I understand that I can accomplish this using useRef, I am curious if there is an alternative a ...

javascriptreactjstypescriptreact-query

Troubleshooting issues with hint functionality and fullscreen mode in CodeMirror within a jQuery layout

I have integrated the codeMirror library into the UI Layout Plug-in on my website. Challenges: When using CodeMirror within the layout, the Full Screen Editing feature does not work as intended. Press F-11 to zoom in and Esc to exit full screen mode. I ...

javascriptjqueryhtmlcodemirror

Is there a way to track the amount a user scrolls once they have reached the bottom of a page using Javascript?

It's a popular UI pattern on mobile devices to have a draggable element containing a scrollable element. Once the user reaches the end of the scrollable content, further scrolling should transition into dragging the outer element. For example, in this ...

javascriptcss

Issues with JavaScript's getTime() function I am facing problems with

Currently, I'm developing a simple HTML quiz consisting of 10 questions, each on a separate HTML page. Upon the user clicking the START button on the index.html page, the following script is triggered: var s = new Date(); sessionStorage.start_test = ...

javascripthtml

What is the best way to showcase a single item from an array in Vue.JS?

Suppose I have a list of items in Vue.JS data () { return{ items: [ { itemID: 5, itemText: 'foo' }, { itemID: 3, itemText: 'bar' } ] } } Now, if I want to show the item with the itemID of 3 i ...

javascriptarraysvue.jsobjectvuejs2

Is there an issue with Three.js canvas.toDataURL() function in Chromium browsers?

After performing a recent system upgrade, I noticed some issues with Chromium. One of them was a delay in loading my Three.js r85 project, which was resolved after upgrading to Three.js r90. However, I encountered a new problem with toDataUrl() not workin ...

javascriptthree.jshtml5-canvaschromiumarchlinux

Leveraging ng-repeat with multiple arrays

I'm currently developing a weather application, but I've hit a roadblock when trying to tackle what I thought would be a simple task. Unfortunately, my limited experience with Angular has made it difficult for me to figure out how to achieve this ...

javascriptarraysangularjsangularjs-ng-repeat

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Is there a way to create a responsive iframe without relying on a fixed aspect ratio? The width and height of the content are unknown until rendering. Keep in mind, using Javascript is an option. For instance: <div id="iframe-container"> <i ...

javascripthtmlcssiframeresponsive-design

Ensure you always achieve Infinity by accurately calculating the bounding box of objects in A-Frame

When using three.js in my A-Frame scene, I am trying to obtain the bounding box of objects. let boundingBox = new THREE.Box3().setFromObject(element.object3D); However, the 6 values in the boundingBox always default to Infinity or -Infinity as stated in ...

javascriptthree.jsaframe

Post your artwork on Facebook's timeline

I am working on a website that allows users to create custom smartphone cases. One feature I want to implement is the ability for users to share their design on Facebook, including the actual design itself. I have the object and the canvas with the 's ...

javascriptfacebookhtmlcanvas

Choosing between global and local Node packages can be a crucial decision that affects

Recently, I discovered that Angular 2 is installed globally on my system, but I can't remember when I did that or if it's the recommended setup. It seems redundant since Angular can be defined in each project individually. This situation has me ...

javascriptangularnpm

Utilizing Vanilla JavaScript to Insert a Class When a Distinct Class Exists Within an Element

My goal is to dynamically add a class to specific elements based on the presence of another class in elements below them. Consider the following code snippet: < p class="my-paragraph">This is a sentence.</p> < p class="my-par ...

javascripthtmlcss

How to format numbers with commas in AngularJS to make them easier to read

One of my variables looks like this: $scope.numbers = 1234567. When I apply the filter {{numbers| number : 0}}, the result is 1,234,567. Is it possible to get a result like 12,34,567 instead? Thank you in advance. ...

javascriptangularjs

Non-sticky hamburger menu is not fixed in place

Having trouble with the hamburger menu staying sticky? The hamburger icon remains in the corner as you scroll down, but the menu stays fixed at the top of the page, making it hard to access. You tried tweaking the code you found on Codepen, but couldn&apos ...

javascripthtmlcss