"Discover the ins and outs of searching through every property in a Vue array

Question

"Discover the ins and outs of searching through every property in a Vue array

I'm currently working on my vue-app and I’m looking to implement a search feature for various topics. Here’s a sample of the data structure:

people: [
   {
    name: 'Mr.X',
    gender: 'Male',
    location: {
      address: 'some streetname',
      zipcode: '12345',
      city: 'Berlin',
      lng: 'longitude',
      lat: 'latitude',
    },
    skills: [
     { label: 'foo' },
     { label: 'bar' },
    ],
  },
 ...etc
]

To achieve this, I created a computed property in my component like so:

computed: {
   filteredResults() {
     return this.people.filter((person) => {
       let values = Object.values(person).join().toLowerCase();
       return values.includes(this.search.toLowerCase());
     })
   }
}

The HTML section related to the search component looks as follows:

<input type="text" v-model="search" />

<div v-for="(person, index) in filteredResults" :key="index">
    <p>{{ person.name }}</p>
</div>

As it stands, the search only checks against the name field. How can I include all properties for searching? In other words, when I search for “Berlin”, it should display all data associated with that keyword.

javascript vue.js

Answer 1

Answer №1

If I grasp your requirement accurately, you aim to sift through all the nested properties within the object using the search keyword.

Live Demo :

var vm = new Vue({
  el: '#vue-instance',
  data: {
    persons: [
       {
        name: 'Mr.X',
        gender: 'Male',
        location: {
          address: 'some streetname',
          zipcode: '12345',
          city: 'Berlin',
          lng: 'longitude',
          lat: 'latitude',
        }
      }, {
        name: 'Mrs.Y',
        gender: 'Female',
        location: {
          address: 'address 2',
          zipcode: '12345',
          city: 'alpha',
          lng: 'longitude',
          lat: 'latitude',
        }
      }
    ],
    search: ''
  },
  computed: {
    filteredList() {
       return this.persons.filter((person) => {
        const computedObj = { ...person,
            address: person.location.address,
            zipcode: person.location.zipcode,
            city: person.location.city,
            lng: person.location.lng,
            lat: person.location.lat
        }
         return Object.keys(computedObj)
              .some(key => ('' + computedObj[key]).toLowerCase().includes(this.search.toLowerCase()))
       })
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-instance">
  <input type="text" v-model="search" />

  <div v-for="person in filteredList" :key="person.name">
      <p>{{ person.name }}</p>
  </div>
</div>

Answer 2

If I grasp your requirement accurately, you aim to sift through all the nested properties within the object using the search keyword.

Live Demo :

var vm = new Vue({
  el: '#vue-instance',
  data: {
    persons: [
       {
        name: 'Mr.X',
        gender: 'Male',
        location: {
          address: 'some streetname',
          zipcode: '12345',
          city: 'Berlin',
          lng: 'longitude',
          lat: 'latitude',
        }
      }, {
        name: 'Mrs.Y',
        gender: 'Female',
        location: {
          address: 'address 2',
          zipcode: '12345',
          city: 'alpha',
          lng: 'longitude',
          lat: 'latitude',
        }
      }
    ],
    search: ''
  },
  computed: {
    filteredList() {
       return this.persons.filter((person) => {
        const computedObj = { ...person,
            address: person.location.address,
            zipcode: person.location.zipcode,
            city: person.location.city,
            lng: person.location.lng,
            lat: person.location.lat
        }
         return Object.keys(computedObj)
              .some(key => ('' + computedObj[key]).toLowerCase().includes(this.search.toLowerCase()))
       })
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-instance">
  <input type="text" v-model="search" />

  <div v-for="person in filteredList" :key="person.name">
      <p>{{ person.name }}</p>
  </div>
</div>

Answer 3

Answer №2

To optimize the search results and enhance performance, consider integrating filtering capabilities directly into the service itself. By passing filters in the request, you can shift the burden from the client to the database, which is better equipped for such tasks.

If conducting the filtering solely on the client-side is necessary, you can create a generalized filter function that allows comparisons based on various properties.

filteredList() {
     const filterObj = {
         'name': 'Mr. X',
         'gender': 'Female'
     };

     return this.persons.filter((person) => {
       // Evaluate if the object matches all defined filters in the filter object
       let isMatch = Object.entries(filterObj).map(([key, value]) => {
           if (typeof value === 'string')
               return person[key].toLowerCase().includes(value);
           if (typeof value === 'boolean')
               return person[key] === value;
           // Additional conditions can be added here
       }).every(i => i);

       return isMatch;
     })
},

Answer 4

To optimize the search results and enhance performance, consider integrating filtering capabilities directly into the service itself. By passing filters in the request, you can shift the burden from the client to the database, which is better equipped for such tasks.

If conducting the filtering solely on the client-side is necessary, you can create a generalized filter function that allows comparisons based on various properties.

filteredList() {
     const filterObj = {
         'name': 'Mr. X',
         'gender': 'Female'
     };

     return this.persons.filter((person) => {
       // Evaluate if the object matches all defined filters in the filter object
       let isMatch = Object.entries(filterObj).map(([key, value]) => {
           if (typeof value === 'string')
               return person[key].toLowerCase().includes(value);
           if (typeof value === 'boolean')
               return person[key] === value;
           // Additional conditions can be added here
       }).every(i => i);

       return isMatch;
     })
},

Answer 5

Answer №3

To begin with, you must create an array that contains all your basic values and then apply a filter to it.

Below is the flatten() function which flattens all values from your data structure into a single array:

const persons = [
   {
    name: 'Mr.X',
    gender: 'Male',
    location: {
      address: 'some streetname',
      zipcode: '12345',
      city: 'Berlin',
      lng: 'longitude',
      lat: 'latitude',
    },
    skills: [
     { label: 'foo' },
     { label: 'bar' },
    ],
  },
]

const flatten = (input) => {
  if (typeof input === 'object') {
    return (Array.isArray(input) ? input : Object.values(input))
      .reduce((acc, x) => acc.concat(flatten(x)), [])
  } else {
    return [input]
  } 
}

console.log(flatten(persons))
console.log(flatten(persons).includes('Berlin'))

Answer 6

To begin with, you must create an array that contains all your basic values and then apply a filter to it.

Below is the flatten() function which flattens all values from your data structure into a single array:

const persons = [
   {
    name: 'Mr.X',
    gender: 'Male',
    location: {
      address: 'some streetname',
      zipcode: '12345',
      city: 'Berlin',
      lng: 'longitude',
      lat: 'latitude',
    },
    skills: [
     { label: 'foo' },
     { label: 'bar' },
    ],
  },
]

const flatten = (input) => {
  if (typeof input === 'object') {
    return (Array.isArray(input) ? input : Object.values(input))
      .reduce((acc, x) => acc.concat(flatten(x)), [])
  } else {
    return [input]
  } 
}

console.log(flatten(persons))
console.log(flatten(persons).includes('Berlin'))

"Discover the ins and outs of searching through every property in a Vue array

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to store selected items from a multi-select box in AngularJS that is generated using ng-repeat?

Switch between using the useState hook by toggling it with the MUI Switch

Converting a JavaScript timestamp into a human-readable date and time using as.POSIXct in R

Having a text input that is dependent on choosing a particular item from a list

Page freezing due to JQuery scroll event

Using dual index variables in Angular 4's ngFor loop for iterating through arrays

Display array values in JavaScript from different arrays

How can I incorporate variables within a style tag in an Angular template?

Mocking objects in unit test cases to simulate real-life scenarios and test the

Unable to remove the dropotron transparency from the menu dropdown

What is the best way to extract values from promises that are still pending?

Locate and dismiss a toast message (Toastr)

What is the proper way to change this JavaScript variable into JSON format?

The conditional statement is malfunctioning when both dates are identical

Get a Blob as a PNG File

Updating component data in VueJS can sometimes be tricky, especially when dealing with the same

Subtract the initial character from the result

Issue: Database not updating after input via AJAXExplanation: Despite submitting new data through AJAX, the

Enhancing validation in an established tutorial using Backbone

What are the steps for implementing Jquery Datatables Ellipsis renderer with a template field link button?