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

5033
16
Jump to solution
04-20-2018 08:14 PM
CaraMayo
New Contributor

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

0 Kudos
16 Replies
RobertScheitlin__GISP
MVP Emeritus

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
  });‍‍‍‍‍‍‍‍‍‍‍‍
});
0 Kudos
CaraMayo
New Contributor

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");
      }
   });

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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");
      }
   });‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
CaraMayo2
New Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
CaraMayo2
New Contributor III

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?

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

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

} //end updateDefinitionExpression function

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
CaraMayo
New Contributor

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. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Cara,

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

0 Kudos