featureLayer.graphics returns an empty array despite graphics being present

BrettGreenfield__DNR_ — Fri, 21 Mar 2014 17:52:13 GMT

Hi,

I'm creating a map that allows users to select fish species and fish pathogen types to query out features in a Feature Layer that contain information on testing for that species and pathogen type. Certain species have not been tested for certain pathogens, so in the event of the query not returning any results, I want to add a message that lets the user know that that species/pathogen combination have not been tested (and thus, no features will be displayed on the map). I thought to do so by creating an if statement that fires if the length of fl.graphics is 0. However, the length is ALWAYS coming up as 0, even if the query does return features. If I add a console.log(fl.graphics) to the function, firebug shows me a blank array ("[ ]"); but if I click on those empty brackets, it does expand to show the graphics in the layer (if any are present). Similarly, if you just inspect the fl object, you can expand the graphics property to see the contents of the array. I'm stumped as to how to get the document to recognize the true length of the array. See my code below:

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Fish Pathogens</title>    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojo/resources/dojo.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/skins/tundra.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">   <style>     html, body {        height: 100%;        width: 100%;        margin: 0;        padding: 0;        overflow: hidden;     }  td  {  padding:3px;  }     #BasemapToggle {       position: fixed;       top: 3%;       right: 20px;       z-index: 50;     }       #container {        height: 100%;        visibility: hidden;     }  .esriPopup .titlePane {    font-weight:bold;    font-size: 14px;    line-height:30px;    background-color:#0893CF;  }  .esriPopup .titleButton.maximize {    top:10px;  }  .esriPopup .titleButton.close {    top:7px;  }  .action.zoomTo {    display:none;  }   </style>    <script src="http://js.arcgis.com/3.7/"></script>   <script>  var fl;       require([       "dojo/ready",       "dgrid/OnDemandGrid",       "dgrid/Selection",        "dojo/store/Memory",        "dojo/_base/array",       "dojo/dom-style",       "dijit/registry",       "esri/map",        "esri/layers/FeatureLayer",       "esri/tasks/QueryTask",       "esri/tasks/query",    "esri/dijit/BasemapToggle",    "esri/renderers/UniqueValueRenderer",    "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",    "dojo/_base/Color",       "dojo/_base/declare",        "dojo/number",        "dojo/on",        "dojo/parser",        "dijit/layout/BorderContainer",        "dijit/layout/ContentPane"       ], function(         ready,         Grid,          Selection,          Memory,          array,         domStyle,         registry,         Map,         FeatureLayer,         QueryTask,         Query,   BasemapToggle,   UniqueValueRenderer,   SimpleLineSymbol,   SimpleFillSymbol,   Color,         declare,          dojoNum,         on,          parser       )   {         ready(function() {            parser.parse();             map = new Map("map", {             basemap: "gray",             center: [-77, 38.9],             zoom: 9           });          var toggle = new BasemapToggle({    map: map,    basemap: "satellite"     }, "BasemapToggle");     toggle.startup();                pathogenService = "http://services.arcgis.com/njFNhDsUCentVYJW/arcgis/rest/services/FishPathogens/FeatureServer/0";           outFields = ["*"];                var infoTemplate = new esri.InfoTemplate();     infoTemplate.setTitle("${NAME}");     infoTemplate.setContent( "<table border='0', width='100%'>"          + "<tr><td width='50%' width='100%' valign='top'>Species:</td><td width='50%' valign='bottom'> ${SPECIES}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Years Tested for LMBV:</td><td width='50%' valign='top'> ${LMBV_YEARS}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Years Tested for Whirling (Pre-2000):</td><td width='50%' valign='top'> ${WD_YR_bf00}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Years Tested for Whirling (Post-2000):</td><td width='50%' valign='top'> ${WD_YR_af00}</td></tr>"     );       map.infoWindow.resize(425,225);          var highlight = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,255,255]), 3), new dojo.Color([50,50,255,0]));                var fl = new FeatureLayer(pathogenService, {             id: "participants",             mode: esri.layers.FeatureLayer.MODE_ONDEMAND,             outFields: outFields,    infoTemplate: infoTemplate           });          fl.on("click", function(e) {       fl.clearSelection();    map.graphics.clear();     });            fl.on("mouse-over", function() {             map.setMapCursor("pointer");           });           fl.on("mouse-out", function() {             map.setMapCursor("default");           });          dojo.connect(map.infoWindow, "onHide", function() {    map.graphics.clear();    });            map.addLayers([fl]);               map.on("load", function( evt ){             domStyle.set(registry.byId("container").domNode, "visibility", "visible");           });      document.getElementById('applyFilter').onclick = function pathogenFilter() {       document.getElementById('noMatches').innerHTML = '';       speciesType = document.getElementById("speciesFilter").value;    pathogenType = document.getElementById("pathogenFilter").value;    var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);    defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);    var renderer = new UniqueValueRenderer(defaultSymbol, pathogenType);    renderer.addValue("N/A", new SimpleFillSymbol().setColor(new Color([204, 204, 204, 1])));    renderer.addValue("NEGATIVE", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL), new Color([7,172,242,1])));    renderer.addValue("POSITIVE", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL), new Color([255,0,0,1])));    fl.setDefinitionExpression("SPECIES LIKE'%" + speciesType + "%' AND " + pathogenType + " <> 'N/A'");    console.log(fl);    if(fl.graphics.length === 0) {     document.getElementById("noMatches").innerHTML = "No testing has been done for the selected species/pathogen.";    }    fl.setRenderer(renderer);     }         });     });   </script> </head>  <body class="tundra">   <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false, design: 'sidebar', liveSplitters:true">     <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center', splitter:true" style="z-index:2">    <span id="BasemapToggle"></span>    <span id="Filter" style="position:fixed; left:20px; z-index:1; height:115px; bottom:50px; background-color:#FFFFFF; border:2px solid #666666; border-radius:6px; font-size:18px; padding:5px">      <p style="margin-top:2px">Sort by:</p>   <p style="margin-top:-25px; text-indent:10px; font-size:12px">Species: <select id='speciesFilter'><option value=''''>Select a Species</option><option value='Alewife'>Alewife</option><option value='American Shad'>American Shad</option><option value='Blueback Herring'>Blueback Herring</option><option value='Brook Trout'>Brook Trout</option><option value='Brown Trout'>Brown Trout</option><option value='Chain Pickerel'>Chain Pickerel</option><option value='Channel Catfish'>Channel Catfish</option><option value='Hickory Shad'>Hickory Shad</option><option value='Largemouth Bass'>Largemouth Bass</option><option value='Other Sunfish'>Other Sunfish</option><option value='Rainbow Trout'>Rainbow Trout</option><option value='Smallmouth Bass'>Smallmouth Bass</option><option value='Suckers'>Suckers</option><option value='Yellow Perch'>Yellow Perch</option></select><br></p>   <p style="margin-top:-10px; text-indent:10px; font-size:12px">Pathogen: <select id='pathogenFilter'><option value=''''>Select a Pathogen</option><option value='LMBV'>LMBV</option><option value='WD_bf_2000'>Whirling Disease (tested before 2000)</option><option value='WD_af_2000'>Whirling Disease (tested after 2000)</option></select>   <p style="margin-top:-7px; font-size:12px"><a href="javascript:{}" id="applyFilter">Apply filter</a>   <span id="noMatches" style="position:fixed; left:100px; bottom:55px; width: 265px; background-color-:#FFFFFF; border:0px; z-index:999; color:#FF0000"></span>    </span>  </div>   </div> </body> </html>

Any help would be appreciated!

Re: featureLayer.graphics returns an empty array despite graphics being present

KenBuja — Fri, 21 Mar 2014 18:19:09 GMT

When you apply the definition expression, the layer will refresh itself. I added an update-end event listener to the layer and the text updated properly.

                document.getElementById('applyFilter').onclick = function pathogenFilter() {                     document.getElementById('noMatches').innerHTML = '';                     speciesType = document.getElementById("speciesFilter").value;                     pathogenType = document.getElementById("pathogenFilter").value;                     var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);                     defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);                     var renderer = new UniqueValueRenderer(defaultSymbol, pathogenType);                     renderer.addValue("N/A", new SimpleFillSymbol().setColor(new Color([204, 204, 204, 1])));                     renderer.addValue("NEGATIVE", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL), new Color([7, 172, 242, 1])));                     renderer.addValue("POSITIVE", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL), new Color([255, 0, 0, 1])));                     fl.setDefinitionExpression("SPECIES LIKE'%" + speciesType + "%' AND " + pathogenType + " <> 'N/A'");                     //console.log(fl);                     //if (fl.graphics.length === 0) {                     //    document.getElementById("noMatches").innerHTML = "No testing has been done for the selected species/pathogen.";                     //}                     fl.setRenderer(renderer);                 }                  fl.on("update-end", function () {                     if (fl.graphics.length === 0) {                         document.getElementById("noMatches").innerHTML = "No testing has been done for the selected species/pathogen.";                     }                     else                     {                         document.getElementById("noMatches").innerHTML = fl.graphics.length + " features"                     }

Re: featureLayer.graphics returns an empty array despite graphics being present

BrettGreenfield__DNR_ — Fri, 21 Mar 2014 18:27:19 GMT

I figured that had something to do with it. Thanks, Ken!

topic featureLayer.graphics returns an empty array despite graphics being present in ArcGIS JavaScript Maps SDK Questions

featureLayer.graphics returns an empty array despite graphics being present

Re: featureLayer.graphics returns an empty array despite graphics being present

Re: featureLayer.graphics returns an empty array despite graphics being present