How to Filter features by multiple attribute?

02-09-2021 09:11 PM
New Contributor II

Hallo, im newbie about arcgis api js, i want to question, how to filter by multiple attributes, in below im to try use this sample code by arcgis,

but this sample, just filter by one filter, i want to filter by multiple atributes and show on map, example i want to filter by winter and spring and show it together on map, thnks


<!DOCTYPE html>

  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Filter features by attribute | Sample | ArcGIS API for JavaScript 4.18</title>

  <link rel="stylesheet" href="" />
  <script src=""></script>

    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;

    #seasons-filter {
      height: 160px;
      width: 100%;
      visibility: hidden;

    .season-item {
      width: 100%;
      padding: 12px;
      text-align: center;
      vertical-align: baseline;
      cursor: pointer;
      height: 40px;

    .season-item:focus {
      background-color: dimgrey;

    .season-item:hover {
      background-color: dimgrey;

    #titleDiv {
      padding: 10px;

    #titleText {
      font-size: 20pt;
      font-weight: 60;
      padding-bottom: 10px;

    ], function (
      MapView, Map, FeatureLayer, Expand
    ) {
      let floodLayerView;

      // flash flood warnings layer
      const layer = new FeatureLayer({
        portalItem: {
          id: "f9e348953b3848ec8b69964d5bceae02"
        outFields: ["SEASON"]

      const map = new Map({
        basemap: "gray-vector",
        layers: [layer]

      const view = new MapView({
        map: map,
        container: "viewDiv",
        center: [-98, 40],
        zoom: 4

      const seasonsNodes = document.querySelectorAll(`.season-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) {
        const selectedSeason ="data-season");
        floodLayerView.filter = {
          where: "Season = '" + selectedSeason + "'"

      view.whenLayerView(layer).then(function (layerView) {
        // flash flood warnings layer loaded
        // get a reference to the flood warnings layerview
        floodLayerView = layerView;

        // set up UI items = "visible";
        const seasonsExpand = new Expand({
          view: view,
          content: seasonsElement,
          expandIconClass: "esri-icon-filter",
          group: "top-left"
        //clear the filters when user closes the expand widget"expanded", function () {
          if (!seasonsExpand.expanded) {
            floodLayerView.filter = null;
        view.ui.add(seasonsExpand, "top-left");
        view.ui.add("titleDiv", "top-right");


  <div id="seasons-filter" class="esri-widget">
    <div class="season-item visible-season" data-season="Winter">Winter</div>
    <div class="season-item visible-season" data-season="Spring">Spring</div>
    <div class="season-item visible-season" data-season="Summer">Summer</div>
    <div class="season-item visible-season" data-season="Fall">Fall</div>
  <div id="viewDiv"></div>
  <div id="titleDiv" class="esri-widget">
    <div id="titleText">Flash Floods by Season</div>
    <div>Flash Flood Warnings (2002 - 2012)</div>



Tags (2)
0 Kudos
4 Replies
MVP Honored Contributor

The where clause would be

where: "Season = 'Winter' or Season = 'Spring'"
where: "Season in ('Winter', 'Spring')"
MVP Honored Contributor

@ZenBahsin, if this post answered your question, please click the "Accept as Solution" button

0 Kudos
New Contributor II

Sorry, I still have a problem in this case, I mean how to do 'where' when I select spring, it will display spring, and when I click spring then I click winter, spring and winter appear.

0 Kudos
MVP Honored Contributor

The where clause would look like this:

where: "Season = '" + selectedSeason + "' or Season = 'Spring'"
0 Kudos