&& operator not working correctly in Vue JS

Hi, I'm having difficuilty in getting the && operator working with Nuxt JS. I've built a property search filter to filter down properties via a URL query, and I'm trying to check to see whether a particular item in the query - the Property Type is an array and if it is also got more than one item, otherwise run something else. But it doesn't seem to be running both:

filteredProperties: function(){
      return this.properties.filter((property) => {

      let searchTypeMatch = this.searchType.length > 1 && this.searchType.constructor == Array
        ? this.searchType.some(function(val){
          return property.type.match(val)
        })
        : property.type.match(this.searchType)

      return property.address.match(this.searchAddress) &&
        searchTypeMatch &&
        property.bedrooms.match(this.searchBedrooms) &&
        property.county.match(this.searchCounty)
      });
    }

This part seems to be doing one or the other, but not both. I need both to be valid before it continues otherwise I need it to go into the : (else) statement

this.searchType.length > 1 && this.searchType.constructor == Array

The problem I'm getting is if I have the .length part first then it gives an error, and if I have the Array check first then it gives an error on that, I need both to be valid.

click

7 years ago

Level 35

What is this.searchType when it fails for you? Can you add this to your code?

console.log(
   typeof this.searchType,
   this.searchType,
   this.searchType.length,
   this.searchType.constructor,
   (this.searchType.length > 1 && this.searchType.constructor == Array)
);

I never used NuxtJS. So can't help you with that. Just a wild guess, maybe it has something todo with the fact that your "one line if statement" is not on one line? Can you try it with the if () { /**/ } else { /**/ }?

And can't you use the Array.isArray() or the instanceofto check if a variable is an array?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

if (this.searchType instanceof Array) { /* */ }

More info and comparison: https://stackoverflow.com/questions/767486/how-do-you-check-if-a-variable-is-an-array-in-javascript

update in javascript this works perfectly fine.

let searchType = [1,2,3];
// let searchType = {1: '1', 2: '2', 3:'3'};
// let searchType = 1;
// let searchType = '1';
let searchTypeMatch = searchType.length > 1 && searchType.constructor == Array
? console.log('is array')
: console.log('is not an array');

sts-ryan-holton

7 years ago

Best Answer

Level 1

I got it working by doing:

computed: { filteredProperties: function(){ return this.properties.filter((property) => {

    let searchTypeMatch;

    if (typeof this.searchType === "object") {
      searchTypeMatch = this.searchType.some(function(val){
        return property.type.match(val)
      })
    } else {
      searchTypeMatch = property.type.match(this.searchType)
    }

  return property.address.match(this.searchAddress) &&
    searchTypeMatch &&
    property.bedrooms.match(this.searchBedrooms) &&
    property.county.match(this.searchCounty)
  });
}

}

Please or to participate in this conversation.