Test object for filtered results in VueJS or Vanilla JS with secondary search functionality

Question

Test object for filtered results in VueJS or Vanilla JS with secondary search functionality

I've been tackling an intriguing challenge that has left me scratching my head. The code I have here is my latest attempt, and while it's close to working correctly, there seems to be something missing. Any assistance would be greatly appreciated. (This project is a volunteer endeavor for an animal adoption agency)

Here's the scenario:

I'm working with a Firebase database containing around 7,000 adopters. They are categorized into an Object structure like this:

{
  // Data fields of adopters 
}

Now, I have a search box set up like this:

<b-form-input id="searchInputString" v-model="searchInputString" name="searchInputString" type="text" placeholder="Search Adopters" class="form-control mb-3" autocomplete="off" @keyup.native="filterAdopters" />

The @keyup event triggers this function:

filterAdopters: function(event) {
  // JavaScript function logic
},

Simply put, I want to filter out results based on multiple search keywords entered by the user in a search query. The current method isn't yielding the desired results, am I missing something? Any suggestions on how to improve this approach?

javascript vue.js filter include

Answer 1

Answer №1

To effectively filter data, it is recommended to assign all rows to a variable named results. Then, within a for loop, continue filtering the results using the following code snippet:

results = results.filter(s => {....

This process will progressively narrow down the matching rows based on each word in the search input.

While the provided solution has not been tested extensively, it is anticipated to function correctly:

filterAdopters: function(event) {
  this.spiltFilteredData = []

  if (!this.isNullOrEmpty(this.searchInputString)) {
    let searchArray = this.searchInputString.split(" ")
    console.log('Search Array =>', searchArray)

    // Retrieve all rows
    let results = this.allAdoptersData.map(s => {
      // Concatenate and lowercase all properties to optimize the filtering process
      // Include a new helper property, `concatenatedProps`, in all rows which will be removed later
      s.concatenatedProps  = [
        s.ApplicantCellPhone,
        s.ApplicantCity,
        s.ApplicantDLNum,
        s.ApplicantEmail,
        s.ApplicantEmployerName,
        s.ApplicantFirstName,
        s.ApplicantHomePhone,
        s.ApplicantLastName,
        s.ApplicantStreet,
        s.ApplicantZip,
        s.CoapplicantCellPhone,
        s.CoapplicantCity,
        s.CoapplicantDLNum,
        s.CoapplicantEmail,
        s.CoapplicantEmployerName,
        s.CoapplicantFirstName,
        s.CoapplicantHomePhone,
        s.CoapplicantLastName,
        s.CoapplicantStreet,
        s.CoapplicantZip
      ].join(' ') // Utilize ' ' for text joining as no search is conducted for spaces
       .toLowerCase()

      return s
    });

    for (let i = 0; i < searchArray.length; i++) {
      let searchText = searchArray[i].toLowerCase();

      results = results.filter( s => s.concatenatedProps.indexOf( searchText) !== -1 )
    }

    this.spiltFilteredData = results.map(s => {
      // Remove the helper property before returning the filtered data
      delete s.concatenatedProps

      return s
    })

  } else {
    this.searchInputString = ''
    this.spiltFilteredData = []
  }

  console.log('spiltFilteredData', this.spiltFilteredData)
},

Answer 2

To effectively filter data, it is recommended to assign all rows to a variable named results. Then, within a for loop, continue filtering the results using the following code snippet:

results = results.filter(s => {....

This process will progressively narrow down the matching rows based on each word in the search input.

While the provided solution has not been tested extensively, it is anticipated to function correctly:

filterAdopters: function(event) {
  this.spiltFilteredData = []

  if (!this.isNullOrEmpty(this.searchInputString)) {
    let searchArray = this.searchInputString.split(" ")
    console.log('Search Array =>', searchArray)

    // Retrieve all rows
    let results = this.allAdoptersData.map(s => {
      // Concatenate and lowercase all properties to optimize the filtering process
      // Include a new helper property, `concatenatedProps`, in all rows which will be removed later
      s.concatenatedProps  = [
        s.ApplicantCellPhone,
        s.ApplicantCity,
        s.ApplicantDLNum,
        s.ApplicantEmail,
        s.ApplicantEmployerName,
        s.ApplicantFirstName,
        s.ApplicantHomePhone,
        s.ApplicantLastName,
        s.ApplicantStreet,
        s.ApplicantZip,
        s.CoapplicantCellPhone,
        s.CoapplicantCity,
        s.CoapplicantDLNum,
        s.CoapplicantEmail,
        s.CoapplicantEmployerName,
        s.CoapplicantFirstName,
        s.CoapplicantHomePhone,
        s.CoapplicantLastName,
        s.CoapplicantStreet,
        s.CoapplicantZip
      ].join(' ') // Utilize ' ' for text joining as no search is conducted for spaces
       .toLowerCase()

      return s
    });

    for (let i = 0; i < searchArray.length; i++) {
      let searchText = searchArray[i].toLowerCase();

      results = results.filter( s => s.concatenatedProps.indexOf( searchText) !== -1 )
    }

    this.spiltFilteredData = results.map(s => {
      // Remove the helper property before returning the filtered data
      delete s.concatenatedProps

      return s
    })

  } else {
    this.searchInputString = ''
    this.spiltFilteredData = []
  }

  console.log('spiltFilteredData', this.spiltFilteredData)
},

Test object for filtered results in VueJS or Vanilla JS with secondary search functionality

Answer №1

Similar questions

What is the best way to retrieve ember model relation properties within routes and controllers?

The concept of expect-respond fails to function effectively when conducting unit tests in AngularJS with Jasmine

How can the @blur event be added to the vue-bootstrap-typeahead in Nuxt/Vue application?

Obtaining a file from the Firebase database

VueJS Element Library's date picker feature returns dateTime values with their corresponding time zones attached

Looking for guidance on implementing throttle with the .hover() function in jQuery?

What is preventing the installation of this Chrome extension?

What is the best way to assign IDs in JavaScript?

Tips for implementing conditional styling (using else if) in a react component

What is the best way to save functions that can be utilized in both Vue front-end and Node back-end environments at the same time?

The sequence of Aurelia bindings processing

In version 81 of Three.js, the toShapes() function has been relocated to a new class. Find out how

Is it more effective to import an entire library or specific component when incorporating it into Create-React-App?

Leveraging the power of Firebase and JavaScript to easily include custom user fields during the user

Deciphering the outcome of filtering tasks

Is it possible to continuously generate webpages using AJAX?

Elegant transition effects for revealing and hiding content on hover

Does the data in a Vuex store always stay in memory?

Running a Node.js script on an Express.js server using an HTML button

Implementing a one-time watcher with user input in Vue.js