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

[CaraMayo]

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...";
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: "<br />Lead PI: {HISAProjects_final_1262017_cs_5}"
+ "<br />Region: {HISAProjects_final_1262017_csv_}"
+ "<br />Year: {FY}"
+ "<br />Primary Habitat Type: {HISAProjects_final_1262017_cs_2}"
+ "<br />Secondary Habitat Type: {HISAProjects_final_1262017_cs_3}"
+ "<br />Distance from shore: {HISAProjects_final_1262017_csv1}"
+ "<br />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);
}

function updateDefinitionExpression(definitionExpression){
//var definitionExpression = "HISAProjects_final_1262017_cs_2 = 'PELAGIC' AND FY = '2010'";
layer.setDefinitionExpression(definitionExpression);
console.log(definitionExpression);
map.infoWindow.hide();

function connectIds(){

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

}

} //end updateDefinitionExpression function

});// end Function

[CaraMayo]

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

[RobertScheitlin__GISP]

Cara,

   Any possibility of sharing your full code for review?

[CaraMayo]

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!

[RobertScheitlin__GISP · Accepted solution]

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

[CaraMayo]

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?

[RobertScheitlin__GISP]

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

[CaraMayo]

Thank you!