topic Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2? in ArcGIS JavaScript Maps SDK Questions

How do you access the attribute of a feature layer in arcgis javascript api 3.2?

CaraMayo — Sat, 21 Apr 2018 03:14:28 GMT

I feel like I should be able to find the answer to this question, but I haven't been successful so far so I thought I would reach out for some help... I am making a web map similar in style to the Shortlist story map. There is a map with a layer that contains the locations of projects around the US (polygons) and a sidebar of cards. Each card is supposed to correspond to a project on the map. The map also has a filter tool that allows you to query the feature layer for a couple attributes.

I want to connect my cards to their corresponding feature on the map so that when a person queries the map, they see only the polygons and corresponding cards. If a polygon is hidden due to the filter request, its corresponding card should hide too. Each card's id is the project's Project Number and each project has a ProjectNum field that contains the project number. The problem is, I can't figure out how to access the Project Number of each feature. How do you do this?

Thank you!

Below is the code I have so far:

require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/dijit/Legend",
"dojo/domReady!"
], function(
Map,
FeatureLayer,
PopupTemplate,
Legend
) {

var map = new Map("viewDiv", {
basemap: "gray-vector",
center: [ -85.20127, 35.12355 ],
zoom: 1
});

// Add layer to the map

var serviceUrl = "https://services2.arcgis.com/C8EMgrsFcRFL6LrL/arcgis/rest/services/HISAProjects_WFL1/FeatureServer/0?token=YpbF4nsIB3GuSbWIhgwXbWczDf8K5hPtyHvhd9tOsM2DH_H5h6XtKDa-QnCwSgFbuRM9Ys49M5u3Q6kxshkFwT3b1piPsaqqYDliPnZ3iHXmT6mt0vul77BFD2TtdU-K_11qvpDFZ8nrt4dSKnD_q1D-G7aV97yTAsYdcD4-iUiMhEZqc8IAErCkuf86rXdOZXXeOdZuHNP8Yr0S5KY-gf3k7LIt6XalyiZPyZ2439c";
var layer = new FeatureLayer(serviceUrl, {
outFields: [ "FY", "HISAProjects_final_1262017_cs_2", "HISAProjects_final_1262017_csv1", "HISAProjects_final_1262017_cs_4", "HISAProjects_final_1262017_cs_5", "HISAProjects_final_1262017_csv_", "HISAProjects_final_1262017_cs_3", "HISAProjects_final_1262017_cs_1", "HabitatData12_4_17_ProjectNum"],

infoTemplate: new PopupTemplate({
title: "{HISAProjects_final_1262017_cs_4}",
description: " Lead PI: {HISAProjects_final_1262017_cs_5}"
+ " Region: {HISAProjects_final_1262017_csv_}"
+ " Year: {FY}"
+ " Primary Habitat Type: {HISAProjects_final_1262017_cs_2}"
+ " Secondary Habitat Type: {HISAProjects_final_1262017_cs_3}"
+ " Distance from shore: {HISAProjects_final_1262017_csv1}"
+ " Secondary Distance from shore: {HISAProjects_final_1262017_cs_1}"

//
// "Learn more.." link connected to individual main-areaCard info windows

})
});

map.addLayer(layer);
var legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "Habitat Type"
}]
}, "legendDiv");

// "Global" Variables
var filter1 = document.getElementById("filterhabitat");
var filter2 = document.getElementById("filterlocation");
var filter3 = document.getElementById("filteryear");
var button = document.getElementById("button");

map.on("load", function(evt){
legend.startup();
button.addEventListener("click", function(e){
// console.log(filter1.options[filter1.selectedIndex].value);
// console.log(filter2.options[filter2.selectedIndex].value);
// console.log(filter3.options[filter3.selectedIndex].value);
habitatValue = filter1.options[filter1.selectedIndex].value;
distanceValue = filter2.options[filter2.selectedIndex].value;
yearValue = filter3.options[filter3.selectedIndex].value;
pushValues(habitatValue, distanceValue, yearValue);

});
}); //end of map event function

function pushValues (habitatValue, distanceValue, yearValue){
var expressionArray = [];

if (habitatValue) {
var str = `HISAProjects_final_1262017_cs_2 = '${habitatValue}'`;
expressionArray.push(str);
}

if (distanceValue) {
var str = `HISAProjects_final_1262017_csv1 = '${distanceValue}'`;
expressionArray.push(str);
}

if (yearValue) {
var str = `FY = '${yearValue}'`;
expressionArray.push(str);
}

console.log(expressionArray);

var definitionExpression = expressionArray.join(' AND ');

updateDefinitionExpression(definitionExpression);
}

projectNum = $('.clickable').attr('id');
console.log(projectNum);
//retrieve ProjectNum for feature

}

} //end updateDefinitionExpression function

});// end Function

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:02:18 GMT

Cara,

So you can loop through the layers features to get the project numbers from each of the features that qualify bsed on the definition query.

require(["dojo/_base/array"], function(array) {
  array.map(layer.graphics, function(gra){
    var projectNum = gra.attributes.HabitatData12_4_17_ProjectNum;
    //now do something with that features project number
    //like filter your cards
  });‍‍‍‍‍‍‍‍‍‍‍‍
});‍‍‍‍‍‍‍

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

CaraMayo — Mon, 23 Apr 2018 05:14:56 GMT

Thank you! I'm having trouble accessing the id number that is supposed to be stored in the projectNum variable. I can see how you are getting to the id number when I look at layer.graphics attributes, but nothing happens when I console.log(projectNum). Do you know why this is?

array.map(layer.graphics, function(gra){
   var projectNum = gra.attributes.HabitatData12_4_17_ProjectNum;

   var currentID = $('.clickable').attr('id');
   if (projectNum != currentID){
      currentID.hide();
      }
      else{
         alert("all the same");
      }
   });

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:02:22 GMT

Cara,

So what happen if you add this line to that code?

array.map(layer.graphics, function(gra){
   var projectNum = gra.attributes.HabitatData12_4_17_ProjectNum;
   console.info(projectNum);
   var currentID = $('.clickable').attr('id'); 
   if (projectNum != currentID){
      currentID.hide();
      }
      else{
         alert("all the same");
      }
   });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

CaraMayo2 — Mon, 23 Apr 2018 14:10:31 GMT

I don't get anything. Nothing logged in the console, no alerts. It's like those lines of code don't exist. But when I use console.log(layer.graphics), I see the array and I can get to where the attributes are.

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

RobertScheitlin__GISP — Mon, 23 Apr 2018 14:29:02 GMT

Cara,

So it sounds like your array loop is happening before the layer is loaded. You need to delay your loop until you have the layer load event fired.

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

CaraMayo2 — Mon, 23 Apr 2018 14:49:04 GMT

I had nested it in the updateDefinitionExpression(definitionExpression) function. So when I test alerts outside of array.map I get them when I click my filter button, but nothing happens inside function(gra). Is that what you're talking about?

} //end updateDefinitionExpression function

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

RobertScheitlin__GISP — Mon, 23 Apr 2018 15:11:05 GMT

Cara,

So you never get alert 2? You likely need to wait for the update-end event on the layer so that you know the layer has the definition applied and that the layer.graphics is populated.

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

CaraMayo — Mon, 23 Apr 2018 18:38:39 GMT

Correct. I've been trying to figure out what the problem is and I'm beginning to wonder if there's something wrong with my feature layer. I can access layer.graphics in the updateDefinitionExpression (i.e. I can run my filter and the contents of layer.graphics are the remaining features), however, when I try to access the features before the updateDefinitionExpression function, I get an empty array. Is that supposed to happen? In other words, I can access my layer variable and under "Graphics" I see the 32 features that I have, but when I log layer.graphics I get nothing.

I tried array.map(function(evt){}); on a simple array that made and it worked fine there. For some reason, I can't access the values of my fields.

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

RobertScheitlin__GISP — Mon, 23 Apr 2018 18:44:29 GMT

Cara,

So after you set your definition on the layer do you see graphics draw on the screen that match your definition?

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

CaraMayo — Mon, 23 Apr 2018 19:22:52 GMT

Yes, the graphics that appear on the screen after the filter function match what I would expect to be on the screen.

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

RobertScheitlin__GISP — Mon, 23 Apr 2018 23:24:56 GMT

Cara,

Any possibility of sharing your full code for review?

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

CaraMayo — Mon, 23 Apr 2018 23:32:34 GMT

The zip file was too big, but I added my html, js, and css files that should give a good picture. I don't know if you'll be able to see the web map though because it can't go public yet.

Let me know if this helps!

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:02:26 GMT

Cara,

I when I use this in your code I do get the project number:

    function updateDefinitionExpression(definitionExpression) {
      console.log("layer1", layer);
      //var definitionExpression = "HISAProjects_final_1262017_cs_2 = 'PELAGIC' AND FY = '2010'";
      layer.setDefinitionExpression(definitionExpression);
      layer.on('update-end', function(evt){
        console.log("this is the project number: " + layer.graphics[0].attributes.HabitatData12_4_17_ProjectNum);
      })
      map.infoWindow.hide();
    } //end updateDefinitionExpression function‍‍‍‍‍‍‍‍‍

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

CaraMayo — Tue, 24 Apr 2018 14:18:29 GMT

Thank you! It worked for me too

I see that you used layer.on instead of array.map and I'm not sure where 'update-end' is coming from. Could you explain what you did differently?

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:02:29 GMT

Cara,

As I mentioned earlier you needed to wait for the layer to update to using the new definition you applied before trying to get the graphics. So using layer.on and the "update-end" event on the layer we are sure that the layer is updated. My example will get the first graphic and log the project number to the console. If you need to loop through all the project numbers then you need something more like this:

    function updateDefinitionExpression(definitionExpression) {
      console.log("layer1", layer);
      //var definitionExpression = "HISAProjects_final_1262017_cs_2 = 'PELAGIC' AND FY = '2010'";
      layer.setDefinitionExpression(definitionExpression);
      layer.on('update-end', function(evt){
        var projNumArr = [];
        array.map(layer.graphics, function(gra){
          projNumArr.push(gra.attributes.HabitatData12_4_17_ProjectNum);
        });
        console.log("these is the project number: " + projNumArr.join(","));
      })
      map.infoWindow.hide();
    } //end updateDefinitionExpression function‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How do you access the attribute of a feature layer in arcgis javascript api 3.2?

CaraMayo — Tue, 24 Apr 2018 14:57:21 GMT

Thank you!