Filter Widget from JS SDK code sample not displaying features when using different data

AlcoGISUser

I am trying to use the code sample for the JavaScript SDK code sample using a filter at this link:

ArcGIS JavaScript SDK FilterByAttributes 

I changed the data source to my own AGOL hosted feature layer and changed the category filter list items in the filter div; however, when I click on one of the categories all of the features disappear.

MyFilterSample 

I haven't changed references in variable names and other placeholder code yet and the CSS still needs to be refined to fit my list. Just trying to get the basic filter function to work at this point.

Thank you.

MatthewDriscoll

You changed some class names in the html, so you need to do that in the javascript too.  .category-item data-category

 

const seasonsNodes = document.querySelectorAll(`.category-item`);
        const seasonsElement = document.getElementById("seasons-filter");

        // click event handler for seasons choices
        seasonsElement.addEventListener("click", filterBySeason);

        // User clicked on Winter, Spring, Summer or Fall
        // set an attribute filter on flood warnings layer view
        // to display the warnings issued in that season
        function filterBySeason(event) {
          console.log(document.querySelectorAll('.category-item'));
          const selectedSeason = event.target.getAttribute("data-category");
          floodLayerView.filter = {
            where: "Category = '" + selectedSeason + "'"
          };
        }