Help combining dropdown filter with range filter

Hi there!

I’ve created a dataset on Wix and linked it to a page with a repeater to search and filter based on various criteria. All of the categorical filters are working well, but I can’t get the filter to work that searches between a range of years. Once I add in the last bit of code to try and search between a range of years, the rest of the code stops working.

Would someone be able to look at my code and please provide suggestions how to fix it?

Thanks in advance!

// filter function
$w . onReady ( function () {

$w ( '#dropdown1, #dropdown2, #dropdown3, #dropdown4, #dropdown5, #dropdown6, #dropdown7, #dropdown8 ' ). onChange (() => { 

    **const**  selectedVal  =  $w ( '#dropdown1' ). value ; 
    **const**  selectedVal2  =  $w ( '#dropdown2' ). value ; 
    **const**  selectedVal3  =  $w ( '#dropdown3' ). value ; 
    **const**  selectedVal4  =  $w ( '#dropdown4' ). value ; 
    **const**  selectedVal5  =  $w ( '#dropdown5' ). value ; 
    **const**  selectedVal6  =  $w ( '#dropdown6' ). value ; 
    **const**  selectedVal7  =  $w ( '#dropdown7' ). value ; 
    **const**  selectedVal8  =  $w ( '#dropdown8' ). value ; 

    **let**  filter  =  wixData . filter (); 

    **if**  ( selectedVal . length  >  0  ||  selectedVal2 . length  >  0  ||  selectedVal3 . length  >  0  ||  selectedVal4 . length  >  0  ||  
        selectedVal5 . length  >  0  ||  selectedVal6 . length  >  0  ||  selectedVal7 . length  >  0  ||  selectedVal8 . length  >  0 ) { 
        filter  =  filter . contains ( "teCnumber" ,  selectedVal ) 
            . and ( filter  =  filter . contains ( "country" ,  selectedVal2 ) 
            . and ( filter  =  filter . contains ( "region" ,  selectedVal3 ) 
            . and ( filter  =  filter . contains ( "tags" ,  selectedVal4 ) 
            . and ( filter  =  filter . contains ( "tags" ,  selectedVal5 ) 
            . and ( filter  =  filter . contains ( "tags" ,  selectedVal6 ) 
            . between ( "teCyear" ,  parseFloat ( $w  ( '#dropdown7' ). value ),  parseFloat ( $w ( '#dropdown8' ). value ) 
            )))))) 

    } 

    $w ( '#dataset1' ). setFilter ( filter ); 

}); 

//RESET FILTER 
$w ( "#button1" ). onClick ( **function**  () { 
    
    $w ( '#dataset1' ). setFilter ( wixData . filter ()); 

    $w ( '#dropdown1' ). value  =  **undefined** ; 
    $w ( '#dropdown2' ). value  =  **undefined** ; 
    $w ( '#dropdown3' ). value  =  **undefined** ; 
    $w ( '#dropdown4' ). value  =  **undefined** ; 
    $w ( '#dropdown5' ). value  =  **undefined** ; 
    $w ( '#dropdown6' ). value  =  **undefined** ; 
    $w ( '#dropdown7' ). value  =  **undefined** ; 
    $w ( '#dropdown8' ). value  =  **undefined** ; 

}); 

});

Ok, that is a lot of filters. I created this for you to try it. Let me know how it goes.

Just change the ids from your dropdowns to the same ones on the example.

//You need to rename your dropdowns ids to match the ones in the example for it to work.

import wixData from 'wix-data'

let selectedValues = []
let dropdowns

const filterDataset = (e) => {
  selectedValues = dropdowns
    .map(({ id, value }) => ({ id: id.replace(/\d+/g, ''), value }))
    .filter((d) => d.value)

  let filtersValues = selectedValues.map((dropdown) =>
    wixData.filter().contains(dropdown.id, dropdown.value)
  )

  const allFilters = filtersValues.reduce((fn, obj) => fn.and(obj))
  if ($w('#teCyearStart').value && $w('#teCyearEnd').value) {
    $w('#dataset').setFilter(
      wixData
        .filter()
        .between('teCyear', +$w('#teCyearStart').value, +$w('#teCyearEnd').value)
        .and(allFilters)
    )
  } else {
    $w('#dataset').setFilter(allFilters)
  }
}

$w.onReady(function () {
  dropdowns = $w('#teCnumber, #country, #region, #tags1, #tags2, #tags3')
  dropdowns.onChange(filterDataset)
  $w('#teCyearStart, #teCyearEnd').onChange(filterDataset)
})

Thank you so much for taking the time to write this code and post, Bruno!

The rest of the code is working great! For some reason, searching between a range of years is still not working. I changed the dropdown boxes to #teCyearStart and #teCyearEnd. I double checked that the field type is a number so that the value can be calculated. I’m trying to rack my brain to think of anything else that could be off.

Any other ideas?

Thanks, again!!

@ktierney so, I decided to take the challenge and refactored all the code, so now, each dropdown works independently from each other. You can filter for years from a specific year AND up until a specific year.

//You need to rename your dropdowns ids to match the ones in the example for it to work.

import wixData from 'wix-data'

let selectedValues = []
let dropdowns
let filter = wixData.filter()

const filterDataset = (e) => {
  let filterValues = []
  let yearsValues = []
  let filterYears
  let startDate = +$w('#teCyearStart').value
  let endDate = +$w('#teCyearEnd').value
  let finalFilter
  startDate && yearsValues.push(filter.ge('teCyear', startDate))
  endDate && yearsValues.push(filter.le('teCyear', endDate))

  selectedValues = dropdowns
    .map(({ id, value }) => ({ id: id.replace(/\d+/g, ''), value }))
    .filter((d) => d.value)

  if (selectedValues.length > 0) {
    filterValues = selectedValues
      .map((dropdown) =>
        filter.contains(
          dropdown.id,
          dropdown.value === '0' ? '' : dropdown.value
        )
      )
      .reduce((fn, obj, _, array) => (array.length > 1 ? fn.and(obj) : fn))
  } else {
    filterValues = null
  }

  if (yearsValues.length > 0) {
    filterYears = yearsValues.reduce((fn, obj, _, array) =>
      array.length > 1 ? fn.and(obj) : fn
    )
  } else {
    filterYears = null
  }

  finalFilter = filterValues
    ? filterYears
      ? filterValues.and(filterYears)
      : filterValues
    : filterYears
    ? filterYears
    : filter

  $w('#dataset').setFilter(finalFilter)
}

$w.onReady(function () {
  dropdowns = $w('#teCnumber, #country, #region, #tags1, #tags2, #tags3')
  dropdowns.onChange(filterDataset)
  $w('#teCyearStart, #teCyearEnd').onChange(filterDataset)
})

@bwprado You genius!! This works! I’ve tested all the filters with different combinations and it’s working great.

I had a quick snag because I used a filter earlier in my code to create a keyword search box. After renaming a few things, they are working great together.

I cannot thank you enough!! :blush: Hope you have a beautiful day!

1 Like

@ktierney you are welcome! Have a good one.