Populating a Dojo widget with country names based on an ESRI hosted layer

Question

Wow, Javascript is not that easy - can someone help me make a simple breakthrough just to understand some basic concepts.

Does anyone know how to populate a filteringSelect Dojo dijit with the names of countries from:

http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/6

I have the following code to make a featureLayer:

countryLayer = new esri.layers.FeatureLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/6",{
                          mode:esri.layers.FeatureLayer.MODE_SELECTION,
                          setMaxAllowableOffset:maxOffset(map,1),
                          outFields:["NAME"]
                        });

I think the next step is to somehow loop through all the country names and populate the dijit - but I'm struggling with this.

I have my HTML for the dijit something like this, but I'm not even sure if thats right:

<div dojotype="dijit.layout.ContentPane" title="Test" >
            <input id="filteringSelect" jsid="filteringSelect" data-dojo-type="dijit.form.FilteringSelect" data-dojo-props="
                                                placeHolder:'Country',
                                                store:countryStore,
                                                searchAttr:'NAME',
                                                name:'NAME'">
        </div>

Answer 1

If I understand you correctly, you just want to query for the names... correct? The better way to do that is with the query task.

https://developers.arcgis.com/javascript/jssamples/index.html#query_and_select

https://developers.arcgis.com/javascript/jssamples/query_nomap.html

Once you execute the query, you can do what you want with the data. I am not familiar with dojo yet but this should point you in the right direction.

Answer 2

I think I have managed to achieve what I wanted using the code below, hope it helps folks out:

Javascript

function init() {

countryMap =  "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
var maxOffset = function maxOffset(map, pixelTolerance) {
                      return Math.floor(map.extent.getWidth() / map.width) * pixelTolerance;
                    };

countryLayer = new esri.layers.FeatureLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/6",{
                      mode:esri.layers.FeatureLayer.MODE_SELECTION,
                      setMaxAllowableOffset:maxOffset(map,1),
                      outFields:["NAME", "OBJECTID"]
                    });
//define a selection symbol
            var highlightSymbol = new esri.symbol.SimpleFillSymbol().setColor( new dojo.Color([50,205,50,.25]));
            countryLayer.setSelectionSymbol(highlightSymbol);

dojo.connect(countryLayer,'onLoad',function(layer){
     var query = new esri.tasks.Query();
     query.where = "type = 'Country'" ;

     layer.queryFeatures(query,function(featureSet){
     var items = dojo.map(featureSet.features,function(feature){
         return feature.attributes;
     });
     var data = {
     identifier:"OBJECTID",
     items:items};

     storeCountries = new dojo.data.ItemFileReadStore({data:data});

     var filteringSelect = new dijit.form.FilteringSelect({
     id: "countryFilterSelect",
     name: "NAME",
     value:"OBJECTID",
     store: storeCountries,
     searchAttr: "NAME"
     }, "countryFilterSelect");
     });
            });

map.addLayers([countryLayer]};

}

HTML:

 <div dojotype="dijit.layout.ContentPane" title="Test" >
            <input id="countryFilterSelect">           
 </div>