CODEWITHSUNDEEP
javascriptvue.jsfilter
web master
web master

Reputation: 245

Trying to filter multiple values inside of multiple arrays - Vue

What’s wrong with my search function? It works for the first line (city values), but not for the others. If I remove everything but the cityValues line, or change the && to ||, the function works, but not like this.

I’m trying to search through an array of parameters on each value. Meaning: the user has the possibility to select multiple options from multiple dropdowns, and see the results.

For some context, cityValue, zipValue etc are arrays. cityValue is an array of strings, and the rest are arrays of numbers.

Thanks

   computed: {
            filteredPropertyTypes() {
                return this.propertyTypes.filter(rental => {
                    return this.cityValue.indexOf(rental.city) !== -1 &&
                        this.zipValue.toString().indexOf(rental.zip.toString()) !== -1  &&
                        this.bedroomsValue.toString().indexOf(rental.bedrooms.toString()) !== -1 &&
                        this.bathroomsValue.toString().indexOf(rental.bathrooms.toString()) !== -1 &&
                        rental.rent.toString().includes(this.rentValue.toString());
                })
            }
        },

Upvotes: 0

Views: 327

Answers (1)

Tony
Tony

Reputation: 1432

According to MDN, The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

arr.indexOf(searchElement[, fromIndex])

The indexOf() method works on Arrays and looking at your function, you are using strings as your array.

For more on the indexOf() method, check here

EDIT -- based on the additional information, if cityValue, zipValue etc are arrays originally, using the toString() method on them causes them to become strings

enter image description here

Try changing your code to

computed: {
  filteredPropertyTypes() {
    return this.propertyTypes.filter(rental => {
      return this.cityValue.indexOf(rental.city.toString()) !== -1 &&
        this.zipValue.indexOf(rental.zip) !== -1  &&
        this.bedroomsValue.indexOf(rental.bedrooms) !== -1 && this.bathroomsValue.indexOf(rental.bathrooms) !== -1 && rental.rent.includes(this.rentValue);
    })
 }
},

Upvotes: 1

Related Questions