Mastering Vue: Implementing Multiple Value Filtering in JavaScript

I'm working on implementing a search/filter functionality for a data table. Currently, I have managed to filter only one element in the array. Here is the array structure;

    dataArray: [
          { date: "12.02.2021", time: "Aaa", level: '1111', service: 'Zzzz', description: '124-362' },
          { date: "13.02.2021", time: "Bbbb", level: '2222', service: 'Yyyyy', description: '748-987' },
          { date: "14.02.2021", time: "Cccc", level: '3333', service: 'Xxxxx', description: '012-365' },
          { date: "15.02.2021", time: "Dddd", level: '4444', service: 'Qqqqq', description: '271-016' },
          { date: "16.02.2021", time: "Eeee", level: '5555', service: 'Tttt', description: '341-222' },
          { date: "17.02.2021", time: "Ffff", level: '6666', service: 'Uuuu', description: '932-324' },
          { date: "18.02.2021", time: "Gggg", level: '7777', service: 'Vvvvv', description: '459-974' },
          { date: "19.02.2021", time: "Hhhh", level: '8888', service: 'Wwwww', description: '224-569' },
          { date: "20.02.2021", time: "Jjjj", level: '9999', service: 'Mmmm', description: '617-619' },
          { date: "21.02.2021", time: "Kkkk", level: '10101010', service: 'Nnnnn', description: '825-379' },
        ],

Below is the HTML structure used for displaying the filtered items;

          <tr v-for="(dataArray, i) in filteredItems" :key="i">
            <p class="table-iterator">{{i--}}</p>
            <td class="table-row text-left">{{connectivityLogs.date}}</td>
            <td class="table-row text-center">{{connectivityLogs.time}}</td>
            <td class="table-row text-center">{{connectivityLogs.level}}</td>
            <td class="table-row text-center">{{connectivityLogs.service}}</td>
            <td class="table-row text-right">{{connectivityLogs.description}}</td>
          </tr>

Above the table, there is an input field 

<input type="text" v-model="search">
where the search variable has been declared in the Vue script's data section.

Finally, here is how filtering based on only the 'time' element is implemented using a computed property;

computed: {
  filteredItems(){
    return this.dataArray.filter(dataArray => {
      return dataArray.time.toLowerCase().indexOf(this.search.toLowerCase()) > -1
    })
  }
}

I need assistance with extending this filtering operation to apply to all elements rather than just 'time'. How can I achieve this?

javascriptvue.jsfilter

Answer №1

If you're looking for a single search box that can search through all fields, this answer has got you covered.

Search Functionality Explained:

computed: {
  filteredItems(){
    return this.dataArray.filter(dataArray => {
      return Object.values(dataArray).some(value => {
        value.toLowerCase().indexOf(this.search.toLowerCase()) > -1
      })
    })
  }
}

This code snippet makes use of Object.values() to extract the values of each object as an array. It then checks if some() of these values contain the search term.

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

Misaligned tabs within Bootstrap Modal

Currently, I am working on creating a Bootstrap Modal that includes tabs for easy navigation within the modal. However, I have encountered an issue where the tabs are not aligned properly as shown in the image linked below: View Image Here This is the co ...

javascripthtmlcssbootstrap-4modal-dialog

Transferring an array in JavaScript to a different page without relying on PHP

Is there a way to transfer data stored in a JavaScript array to another page without using server-side scripting like PHP? Can this be achieved with JS, jQuery, or similar tools? My goal is to access the array in my JS script on the destination page. Appr ...

javascriptjquery

Update information with a fresh GET call - React Dropdown

I have implemented a Dropdown Menu using MUI that allows users to select a specific day value. I would like the menu to trigger a new GET request with the updated parameter whenever the selection changes. However, I am unsure how to achieve this since it u ...

javascriptreactjsapiaxios

Is MapView in React Native restricted to explicit markers only?

I'm facing a challenging problem while working on my app's mapview. I have been struggling to find a solution for dynamically repopulating the mapview. Initially, I attempted the following approach: render() { const dynamicMarker = (lat, long, ...

javascriptreact-nativeexporeact-native-maps

What is the best way to add content to fill the empty space left after a column has been hidden in a column

Is there a way to automatically adjust the space when a column is hidden by clicking on the legend item? <div id="container" style="height: 300px"></div> <script src="http://code.highcharts.com/highcharts.src.js"></script> var ...

javascriptangularjshighcharts

Although the Postman GET request is functional, the Ajax CORS request is currently not

I am attempting to send an AJAX request to retrieve data from a restAPI. Oddly enough, the request works perfectly in POSTMAN and Putty using this code with the RAW option selected, but I am encountering CORS issues when trying to do it with AJAX. Here i ...

javascriptjqueryajaxcors

What is the best way to show two icons next to each other within a React component?

For my school project, I am working on developing an app and encountering a challenge. I have been trying to display two icons side by side on a screen using React (I've been learning React for 5 months but still consider myself a beginner). However, ...

javascriptreactjsreact-nativematerial-ui

Having trouble implementing highlighting functionality for a WebElement in Selenium with JavascriptExecutor on Firefox version 35

During the execution of a script designed to highlight and reset a WebElement in selenium 2.43: public void highlightElement(WebElement element) { String originalStyle = element.getAttribute("style"); JavascriptExecutor js = (JavascriptExecutor) sele ...

javascriptfirefoxselenium

Tips for generating JavaScript within list elements using a PHP script

My PHP script is designed to fetch data from a database and display it as list items within a jQuery Dialog. The process involves creating an array in the PHP while loop that handles the query results, with each list item containing data, an HTML button, a ...

phpjavascript

Is there a way to stop the page from scrolling once I reach the bottom of a specific div within it?

My webpage has multiple divs that share a similar structure: <div style="height:200px; overflow:auto;"> <div style="height:300px;"> <!--There is a lot of content here--> </div> </div> When the user hovers ove ...

javascripthtmlscroll

Methods for updating an image in Angular at a specified time interval?

Currently, I have an image and some counters. Once the total of the counters surpasses 500, I need to display a different image instead. This is what my template looks like: <img src="./assets/noun_Arrow_green.png" alt="Forest" styl ...

javascripthtmlangulartypescript

Simple method for converting pixel values to em units

I'm searching for a simple method to incorporate a line of code into one of my plugins in order to convert specific pixel values into em values. My project's layout requires the use of ems, and I'd prefer not to rely on external plugins for ...

javascriptjqueryfont-size

How to adjust chart axis in Chartist.js to start 10 units above the minimum value and end 10 units below the maximum value?

How can the x-axis on a chartist line graph be adjusted to not start at 0, but instead begin 10 units below the minimum value and end 10 units above the maximum value? Currently, regardless of the minimum number, it always starts at 0. https://i.sstatic.n ...

javascriptjquerychartschartist.js

Pressing the button element equipped with an event listener leads to the page being refreshed

I'm encountering an issue with my function in this JSFiddle window.addEventListener("load", init, false); function init() { let name = document.getElementById("name").addEventListener("blur", checkName, false); let startButton = document.getEl ...

javascriptfunction

The build process encountered an error while processing the module vue-router.esm.js in a Vue.js

Just started using VueJs and decided to incorporate the cli-plugin-unit-jest into my project. However, after adding it, I encountered the following error: Failed to compile. ./node_modules/vue-router/dist/vue-router.esm.js Module build failed: Error: ENO ...

javascriptvue.jsvue-router

Exploring the intricacies of Knockout JS mapping nested models using fromJS function

I am struggling with understanding how to effectively utilize the Knockout JS Mapping Plugin. My scenario involves nested models, and currently I am only using the ko.mapping.fromJS() in the parent model. However, I have noticed that the computed values ar ...

javascriptjqueryrestknockout.jsknockout-mapping-plugin

Is it possible to use Material-UI Link along with react-router-dom Link?

Incorporating these two elements: import Link from '@material-ui/core/Link'; import { Link } from 'react-router-dom'; Is there a method to combine the Material-UI style with the features of react-router-dom? ...

javascriptreactjsmaterial-uireact-router-dom

Leverage JavaScript variables within PHP

Seeking assistance on using javascript variable in php. After researching various resources such as stackoverflow and google, I have yet to find a suitable solution. Although aware of the distinction between client-side scripting in js and server-side proc ...

javascriptphpjquery

What is the way to instruct Mongoose to exclude a field from being saved?

Is there a way in Mongoose to instruct it to not save the age field if it's null or undefined? Or is there a method to achieve this in Express? Express router.put('/edit/:id', function(req, res) { Person.findOneAndUpdate({ _id: req.p ...

javascriptmongodbexpressmongoose

Tips for accessing hidden field values in a second jsp page

I have a webpage called page1.jsp where I am including hidden fields. Here is the code snippet: <form action = "page2.jsp" method = "post" id = "hiddenValuesForm"> <input type = "hidden" name = "userData" value="" id = "useDataID"> <input t ...

javascriptjavajqueryjspscriptlet