Filtering on a boolean attribute

Hello,

I’ve currently got an attribute which is a boolean, and I would like to filter so that if a checkbox is ticked, only records with a true value are returned and if it is not ticked, records with false and true are returned.

I tried using the connectToggle connector to do this in a bunch of different ways:

const VirtualToggle = connectToggle(() => { return null; });
<VirtualToggle attributeName="isOngoing" value={true} defaultChecked={this.state.ongoingFilter} />
and
<VirtualToggle attributeName="isOngoing" value="true" defaultChecked={this.state.ongoingFilter />
and
<VirtualToggle attributeName="isOngoing" defaultChecked={this.state.ongoingFilter />

I also tried not using defaultChecked and instead set the refinement inside of the toggle, but that also didn’t work (no records are returned when the refinement is turned on). I then tried using a VirtualMenu, but that also did not work.

Could someone please share some insight into how this kind of filter can be created?

Thank you very much.

Hi @bjorn!

Why not using directly the connectToggle connector to build your checkbox? Here’s an example showing how to filter on the attribute “bool” to have only results that are true.

Component:

class MyToggle extends React.Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    this.props.refine(event.target.checked)
  }

  render() {
    return (
      <form>
        <label>
          Is true
          <input
            type="checkbox"
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

const CustomToggle = connectToggle(MyToggle)

Usage:

  <CustomToggle attributeName="bool"/>

Will this work for you?

This doesn’t seem to work either.

When I check the checkbox, no records are returned (same as when I was trying to make a VirtualToggle), even though there are plenty of records with a true value. The query parameters sent to Algolia’s API are:
query=&hitsPerPage=20&maxValuesPerFacet=10&page=0&highlightPreTag=<ais-highlight-1491534633737>&highlightPostTag=<%2Fais-highlight-1491534633737>&facets=["isOngoing"%2C"category.lvl0"]&tagFilters=&facetFilters=["isOngoing%3Aundefined"]
I assumed the isOngoing:undefined part is the reason why no hits are returned, so I added a value="true" prop to CustomToggle, but it still doesn’t work. After adding the value prop, the following request is sent:

query=&hitsPerPage=20&maxValuesPerFacet=10&page=0&highlightPreTag=<ais-highlight-1491534633737>&highlightPostTag=<%2Fais-highlight-1491534633737>&facets=["isOngoing"]&tagFilters=&facetFilters=["isOngoing%3Atrue"]

If I try to add a facet filter like isOngoing:true on the Algolia dashboard, it also does not give me any results, which seems to correspond with the issues I’m experiencing in my app.

However, if I add a facet filter with just isOngoing, I get the correct results on the dashboard. How can I replicate this kind of facet filter using react-instantsearch?

I tried the code that I gave you earlier with records like below. bool being declared as an attribute for facetting

[
   {
      bool: true
      name: "record1"
   },
   {
      bool: false
      name: "record2"
   }

Can you use the following jsfiddle https://jsfiddle.net/ar80rgpc/6/ to reproduce the issue your are experiencing?

Absolutely.

Here’s a JSFiddle connected to our index to reproduce the issue:
https://jsfiddle.net/gaovg1pu/

As you can see from the results, a lot of records have isOngoing: true, but if you try to toggle on that attribute, no hits are received.

Hi @bjorn,

Your jsfiddle is not working, can you check it?

Also, can you please verify and add if not present, the onGoing attribute under indices>display>facetting>attributes for facetting?

Thanks :slight_smile:

Hello,

It seems like the attribute was missing from attributes for facetting!
We’re able to filter our results correctly now.

Thank you very much! :slight_smile:

1 Like

That’s great to hear :slight_smile: Happy Coding @bjorn!