Select to view content in your preferred language

How to Filter features by multiple attribute?

1777
4
02-09-2021 09:11 PM
ZenBahsin
Emerging Contributor

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,

https://developers.arcgis.com/javascript/latest/sample-code/featurefilter-attributes/

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>
<html>

<head>
  <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="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.18/"></script>

  <style>
    html,
    body,
    #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;
    }

  </style>
  <script>
    require([
      "esri/views/MapView",
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/widgets/Expand"
    ], 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 = event.target.getAttribute("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
        seasonsElement.style.visibility = "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
        seasonsExpand.watch("expanded", function () {
          if (!seasonsExpand.expanded) {
            floodLayerView.filter = null;
          }
        });
        view.ui.add(seasonsExpand, "top-left");
        view.ui.add("titleDiv", "top-right");
      });
    });

  </script>
</head>

<body>
  <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>
  <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>
  </div>
</body>

</html>

 

Tags (2)
0 Kudos
4 Replies
KenBuja
MVP Esteemed Contributor

The where clause would be

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

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

0 Kudos
ZenBahsin
Emerging Contributor

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
KenBuja
MVP Esteemed Contributor

The where clause would look like this:

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