Isotope Price Range Filtering

Question

All of my isotope elements have classes describing the price. For example:

<figure class="items cap-top VAUT price9800 lon-118.40036 lat34.07364 isotope-item">... </figure>

I have a listening object on a jQuery range slider that returns a price range:

// Init price slider with range $0-$500
$('.slider').slider({
    min: 0,
max: 500,
step: 100,
value: [0,500]
});

//Price Slider Listener
$('#priceSlider').on('slideStop', function() {
    selectedPriceRange = $('input[id=priceSlider]').val();
    var priceRange = selectedPriceRange.split(',');

    //Pass the range the user has chosen to our function to filter isotope
    priceFilterTesting(riceRange[0], priceRange[1]);
});

Per the discussion on Isotopes Github forums here I am trying to pass a jQuery object to Isotopes filter option. Read Here: https://github.com/desandro/isotope/issues/144#issuecomment-4595552

    function priceFilterTesting(minPrice, maxPrice){
  var value = $('.items').filter(function(index){
    var $this = $(this);
    var matcharr = $this.attr('class').match(/price([0-9]*)/);
    if (matcharr) {
        var price = parseInt(matcharr[1]);
        return ((price >= minPrice) && (price <= maxPrice)) ? true : false;
    } else {
        return false;
    }
  });
  options = [];
  options[ 'filter' ] = value;
  console.log(options); 
  $('#results').isotope(options);
}

For some reason when this object is passed into Isotope, nothing happens. Here is what I see in java script console when I log my object

[filter: st.fn.st.init[9]]
filter: st.fn.st.init[9]
    0: figure.items pin cap-top SJWL price6500 lon-118.40036 lat34.07362 hasImage hasImage                 isotope-item
    1: figure.items pin cap-top SFUR price400 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    2: figure.items pin cap-top SFUR price199 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    3: figure.items pin cap-top SFUR price250 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    4: figure.items pin cap-top SFUR price599 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    5: figure.items pin cap-top SFUR price130 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    6: figure.items pin cap-top SFUR price299 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    7: figure.items pin cap-top SANT price125 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    8: figure.items pin cap-top VPAR price80 lon-118.40036 lat34.07362 hasImage hasImage

context: document length: 9 prevObject: st.fn.st.init[30] proto: Object[0] length: 0 proto: Array[0]

Help? Many thanks, world.

Here's the answer.. I was passing an array and not an object into Isotope.. doh!!

    priceFilter: function(minPrice, maxPrice){
      var value = $('.items').filter(function(index){
        var $this = $(this);
        var matcharr = $this.attr('class').match(/price([0-9]*)/);
        if (matcharr) {
            var price = parseInt(matcharr[1]);
            return ((price >= minPrice) && (price <= maxPrice)) ? true : false;
        } else {
            return false;
        }
      });
      $('#results').isotope({filter:value});
    },

Joe · Answer 1 · 2013-06-20T11:59:38.937

You need to tell isotopes how to determine which of your elements you want to show.

In this case, you want to find elements that have a class like priceXXXX and extract the XXXX part. This is easily done with a regex

 $this.attr('class').match(/price([0-9]*)/)

The result there would be null if the element has no such class, and if it does an array like

[ "price9800", "9800" ]

Use parseInt to convert the second element to integer then compare with the min and max price settings. Perhaps something like:

function priceFilterTesting(minPrice, maxPrice){
  var value = $('.items').filter(function(index){
    var $this = $(this),
    var matcharr = $this.attr('class').match(/price([0-9]*)/);
    if (matcharr) {
     var price = parseInt(matcharr[1]);
     return ((price >= minPrice) && (price <= maxPrice)) ? true : false;
    } else {
     return false;
    }
  });
  options[ 'filter' ] = value;
  $container.isotope( options );
}

Very close, I can now console.log the the value object. But when it is passed into Isotope no filtering occurs. I've updated my original post because I cant figure out how to post updated code here. — That1guyoverthr, Jun 20 '13 at 07:02
You appear to be building and passing the list as requried. Everything posted here appears to be working as it should, so the problem would seem to be outside this filtering function. — Joe, Jun 20 '13 at 12:56

Isotope Price Range Filtering

1 Answers1

Linked