Mike Wiesenhart Mike Wiesenhart - 1 day ago 4
Javascript Question

jQuery issue, Uncaught TypeError: Cannot read property 'length' of null

I have this jQuery code. It pulls listings from the database that meet the amenity criteria. However, it breaks every other search feature on my page and I'm not sure why.

I get an

Uncaught TypeError: Cannot read property 'length' of null
on line 185 which is this line...
if (amenityVal.length > 0) {
. I looked on SO for answers and tried
if(amenity && amenity.length > 0)
, and
if(amenity != null && amenity.length > 0
, and
if(amenity != null && != undefined && amenity.length > 0
.

When I do any of those, the other search features work, BUT the amenity search no longer does. Not sure where to go from here. Below is the jQuery.

// amenity
function filter() {
var rows = $("tr.matrix-listing");
rows.hide();

var amenityVal = $("#select-amenities").val();
if (amenityVal.length > 0) {
var amenity = amenityVal;
rows = rows.filter(function(i, v) {
var rowAmenities = $(this).data("amenities").split(/\n/);
return $(rowAmenities).filter(function(_, element) {
return $.inArray(element.trim(), amenity) > -1;
}).length === amenity.length;
});
}

rows.show();
}


HTML:

<div class="col-sm-2">
<!-- Amenities -->
<select multiple id="select-amenities" class="input-tags matrix-listing-filter" placeholder="Amenity">
<option value=""></option>
<option value="Central A/C">Central A/C</option>
<option value="Doorman">Doorman</option>
<option value="Duplex">Duplex</option>
<option value="Elevator">Elevator</option>
<option value="Laundry in building">Laundry in building</option>
<option value="Dishwasher">Dishwasher</option>
<option value="Common courtyard">Common courtyard</option>
<option value="Private backyard">Private backyard</option>
<option value="Shared backyard">Shared backyard</option>
<option value="Balcony">Balcony</option>
<option value="Terrace">Terrace</option>
<option value="Patio">Patio</option>
<option value="Roof access">Roof access</option>
<option value="Private roof deck">Private roof deck</option>
<option value="Storage space">Storage space</option>
<option value="Bike storage">Bike storage</option>
<option value="Gym">Gym</option>
<option value="Private parking">Private parking</option>
<option value="Washer dryer installed">Washer dryer installed</option>
<option value="Washer dryer hookup">Washer dryer hookup</option>
<option value="Wheelchair Accessible">Wheelchair Accessible</option>
</select>
</div>

Answer

When trying out options I missed Val and just had amenity. Wondered why it didn't work. SMH. Below is the solution.

// amenity
var amenityVal = $("#select-amenities").val();
if (amenityVal != null && amenityVal != undefined && amenityVal.length > 0) {
   var amenity = amenityVal;
   rows = rows.filter(function(i, v) {
      var rowAmenities = $(this).data("amenities").split(/\n/);
      return $(rowAmenities).filter(function(_, element) {
         return $.inArray(element.trim(), amenity) > -1;
      }).length === amenity.length;
   });
 }
Comments