Get FeatureLayer Attribute by Clicking

[XuanKuai1]

I'm using ArcGIS API for JavaScript 4.8. My goal is to get the Census tract ID value of the clicked Feature in a FeatureLayer and display the ID value in an alert box. I got stuck when trying to use Query/QueryTask to fetch the value. My code goes here:

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/layers/GroupLayer",
    "esri/widgets/LayerList",
    "esri/tasks/support/Query",
    "esri/tasks/QueryTask",
    "dojo/on",
    "dojo/domReady!"
  ],
  function(
    Map, MapView, FeatureLayer, GroupLayer, LayerList, Query, QueryTask, on
  ) {
    var map = new Map({
      basemap: "topo"
    });

    var view = new MapView({
      center: [-91.05, 30.5161109],
      zoom: 11,
      container: "viewDiv",
      map: map,
    });

    // Generate link to Census tract details
    view.when(function() {
      on(view, "click", displayTractID);
    });

    function displayTractID(event) {
      // TODO
    }

    // Define popup template and get feature layers
    var census2000Template = {
      title: "Census 2000",
      content: [{
        type: "fields",
        fieldInfos: [{
          fieldName: "TRACT",
          label: "Tract",
          visible: true
        }, {
          fieldName: "POPULATION",
          label: "Population",
          visible: true,
          format: {
            digitSeparator: true,
            places: 0
          }
        }]
      }]
    };

    var census2000Layer = new FeatureLayer({
      url: "http://services.arcgis.com/KYvXadMcgf0K1EzK/ArcGIS/rest/services/Census_2000/FeatureServer/0",
      outFields: ["*"],
      popupTemplate: census2000Template
    });

    // Add feature layers to a group layer
    var censusGroupLayer = new GroupLayer({
      title: "Historic Census",
      visible: true,
      visibilityMode: "exclusive",
      layers: [census2000Layer]
    });

    map.add(censusGroupLayer);
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Could someone help me to fill out the TODO part or show me some sandbox examples?

[RobertScheitlin__GISP · Accepted solution]

Xuan,

   Here is how you do that using view.hitTest.

// Get the screen point from the view's click event
view.on("click", function (event) {
 var screenPoint = {
   x: event.x,
   y: event.y
 };

 // Search for graphics at the clicked location
 view.hitTest(screenPoint).then(function (response) {
  if (response.results.length) {
   var graphic = response.results.filter(function (result) {
    // check if the graphic belongs to the layer of interest
    return result.graphic.layer === myLayer;
   })[0].graphic;
   // do something with the result graphic
   console.log(graphic.attributes);
  }
 });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[XuanKuai1]

I think that's a pretty smart workaround. What exactly should I put in place of myLayer at your line 13? Should it be the layer name displayed in the title of the REST page of the layer?

[RobertScheitlin__GISP]

No it would be the actual layer object.

[ChetanPrajapati]

var featureLayer = new FeatureLayer({
url: "https://services6.arcgis.com/qqlm5mJY5vXAZxEC/arcgis/rest/services/LalyerListWithHRBuild/FeatureServer",
});

Can i pass this object  "featureLayer " in place of my layer?

 return result.graphic.layer === myLayer;

[RobertScheitlin__GISP]

yes

[KenjooYeap]

I do understand the docs correctly that from 4.6  onwards the attributes will only contain the ID and layer name? I am getting an object from graphics.attribute of {FID:int}  only, do I have to then do a query based on this FID on the feature layer and get the attributes or is there another way for that?

In this example the attributes is still returning when I switch the api to 4.20, so I am guess I must have done something wrong? 

Thanks for your help! 

Using the following code:

view.on("click", (event)=> {
view.hitTest(event.screenPoint,{include: allSchoolLayer})
.then(function (response) {
if (response.results.length > 0) {
console.log(response);
var graphic = response.results.filter(function(result) { // check if the graphic belongs to the layer of interest
return result.graphic.layer === allSchoolLayerCluster;
})[0].graphic; // do something with the result graphic
console.log(graphic.attributes);
}
});
})

[KenjooYeap]

The reason I was only getting the FID was because the outFields needs to be included in the featureLayer definition. Use outFields:["*"] to include all the feature. 

[kolinn]

Thank!!!

Robert Scheitlin

you saved my time.