Call a function within a function using esri/request returned data

[RachelAlbritton]

I am using the esri/request function to return an array of Long, Lat coordinates that I can then symbolize and add to a graphics layer. I have been able to successfully do this by creating the symbology and graphics within the stopsRequestSucceeded callback method. My issue is that I need to be able to repeat this call for approximately 15 different sets of data that would all need to be symbolized differently, and using the current method that I have working, I would have to write 15 different successful callback methods. To get around this I am trying to write two different functions. First, I narrowed the scope of the stopsRequestSucceeded method to push all the results to an array. This does work (at least according to my console.log statement. Next, I wrote a second function that would call the stopsRequestSucceeded function so that I can loop through the returned array and assign symbology and create a graphic. However, when I call the stopsRequestSucceeded function within the second, stopsGraphic function, the variable is empty. What am I doing wrong?

require([
    "esri/map",
     "esri/layers/ArcGISTiledMapServiceLayer", 
     "esri/layers/GraphicsLayer",
     "esri/request",
     "esri/symbols/SimpleMarkerSymbol",
     "esri/graphic",
     "esri/SpatialReference",
     "esri/geometry/Point",
     "esri/Color",
     "esri/InfoTemplate",

     "dojo/dom",
    "dojo/on",
     "dojo/dom-class",
     "dojo/_base/json",
     "dojox/mobile/Switch",
    "dojo/parser",
    "dojo/ready"],

    function (Map,ArcGISTiledMapServiceLayer, GraphicsLayer, esriRequest,SimpleMarkerSymbol, Graphic, SpatialReference, Point, Color, InfoTemplate,
              dom, on, domClass, dojoJson, Switch, parser, ready){

            // Create the map
            var map = new Map("map", {
                basemap: "topo",
                center: [-111.841947,40.765530],
                zoom: 15
            });
               
               //Create Graphics Layer
               var stopsGraphicsLayer = new GraphicsLayer({
                    id: "stopsGraphicsLayer"
               });
               
               var vehicleLocationGraphicsLayer = new GraphicsLayer ({
                    id: "vehicleLocationGraphicsLayer"
               });

               
               var basemap = new ArcGISTiledMapServiceLayer ("https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/public_basemap_2014/MapServer");
               map.addLayer(basemap);
               
               //add graphics layer
               map.addLayer(vehicleLocationGraphicsLayer);
               map.addLayer(stopsGraphicsLayer);
               
               //hide graphics layer
               vehicleLocationGraphicsLayer.hide();
               stopsGraphicsLayer.hide();
               
               //Create Toggles
               var vehicle = new Switch({
                    id: "vehicle", //defines css - and you can not repeat and id
                    value:"off",
                    class:"mblSwSquareShape"
                    });
                    
                    vehicle.placeAt(document.body); // e.g add the switch to body
                    vehicle.startup();
                    vehicle.on("stateChanged",function(newstate){
                         if (newstate === "on"){
                         
                         //Request vehicle locations
                         esriVehicleRequest(15);
                         
                         //request stop locations
                         esriStopRequest(15);
                         stopsGraphic(0,0,0);
                         }
                         
                         else 
                              
                         {
                         vehicleLocationGraphicsLayer.hide();
                         stopsGraphicsLayer.clear();
                         stopsGraphicsLayer.hide();
                         
                         }
                    });
               
               
               function esriVehicleRequest(routeID){
                    var vehicleRequest = new esriRequest ({
                              url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetMapVehiclePoints",
                              content: {
                                   apikey: "ride1791",
                                   routeID: routeID, //needs to become an input variable
                              },
                              handleAs: "json",
                              callbackParamName: "method"
                         });
                         vehicleRequest.then(vehicleRequestSucceeded, requestFailed);
                         }
               
               function vehicleRequestSucceeded(data) {
                    
                    //Get vehicle points
                    for (i=0; i < data.length; i++) {
                         console.log("Vehicle Points: ", data[i].Longitude , data[i].Latitude);
               }
               }          
               
               function esriStopRequest (routeID){
                         var stopsRequest = new esriRequest ({
                         url: "http://uofubus.com/Services/JSONPRelay.svc/GetStops",
                         content: {
                              apikey: "ride1791",
                              routeID: routeID, 
                         },
                         handleAs: "json",
                         callbackParamName: "method"
                    });
                    stopsRequest.then(stopsRequestSucceeded, requestFailed); //both methods are registered as part of esri request
                    }
               
               /*
               //THIS WORKS BUT I NEED TO BE ABLE TO APPLY DIFF SYMBOLOGY TO EACH NEW ARRAY RETURNED
               function stopsRequestSucceeded (data){
                    
                         //Get Stops
                         for(i=0; i < data.length; i++){
                                   
                              //Create Symbology
                              var stopsSMS = new SimpleMarkerSymbol().setSize(15).setColor(new Color([0,0,0]));
                              
                              //Create InfoTemplate
                              
                         
                              //Create Graphic
                              var stops = new Graphic (new Point (data.Longitude, data.Latitude, map.SpatialReference), stopsSMS);
                              console.log(stops);
                              
                              //Add graphics to graphics layer
                              map.getLayer(stopsGraphicsLayer);
                              stopsGraphicsLayer.add(stops);
                              map.graphics.add(stops);
                         }
                         
                         //Once all the graphics are added to the graphics layer, show GL
                         stopsGraphicsLayer.show();
                         console.log("graphics layer added: ");
                         console.log(stopsGraphicsLayer);
                    } */
               
               //New Return Data Function               
               function stopsRequestSucceeded(data){
                    var stopsArray = [];
                    
                    //Get Stops
                         for(i=0; i < data.length; i++){
                              stopsArray.push(data[i]);     
                         }     
                         console.log ("Stops Array:", stopsArray);
                         return stopsArray;
               }
               
               //Get data from the stopsRequestSucceeded function, apply symbology and create graphics
               function stopsGraphic(color){
                    
                    var stopObjects = stopsRequestSucceeded();
                    console.log(stopObject); //not logging anything
                    
                    for(i=0; i < stopObjects.length; i++) {
                         
                         //Create Symbology
                         var stopsSMS = new SimpleMarkerSymbol().setSize(15).setColor(new Color([color]));
                         
                         //Create Graphic
                         var stops = new Graphic (new Point (stopObjects[i].Longitude, stopObjects[i].Latitude, map.SpatialReference), stopsSMS);
                         console.log(stops);
                         
                         //Add graphics to graphics layer
                         map.getLayer(stopsGraphicsLayer);
                         stopsGraphicsLayer.add(stops);
                         map.graphics.add(stops);
                         
                    }
               }
          
               
               function requestFailed(error) {
                 console.log("Error: ", error.message);
               }
               
                 });
          
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[KellyHutchins · Accepted solution]

If I understand your question correctly it looks like you'll need to get the data first and then pass it to the stopsGraphic function. Here's a jsbin showing how this would work. 

JS Bin - Collaborative JavaScript Debugging 

[RachelAlbritton]

Thank you Kelly - That works but I'm not clear as to why. Is there a resource you can point me to?

I appreciate your time.

[KellyHutchins]

Rachel, 

This article should provide some of the basics. 

Dojo Deferreds and Promises - Dojo Toolkit Tutorial 

The main point is that instead of trying to call stopsRequestSucceeded from the stopsGraphic function we just wait until the original stopsRequestSucceeded call is finished and then we pass the returned data and a color to the stopsGraphics function. 

    //New Return Data Function               
               function stopsRequestSucceeded(data){
                    var stopsArray = [];
                    
                    //Get Stops
                         for(i=0; i < data.length; i++){
                              stopsArray.push(data[i]);     
                         }     
                         console.log ("Stops Array:", stopsArray);
                         return stopsArray;
               }
               
               //Get data from the stopsRequestSucceeded function, apply symbology and create graphics
               function stopsGraphic(color){
                    
                    var stopObjects = stopsRequestSucceeded();

[RachelAlbritton]

Actually, the code doesn't seem to acknowledge different colors that are passed through. I just tried 255,0,0 (red) and still had black symbols being returned which I'm assuming is a default color if a color isn't assigned.

EDIT:

It seems to work in your JSBin but if I copy/paste it into an html file the colors don't change.

Thoughts?

[KellyHutchins]

I updated it after I sent the link to address the color issue. Can you retest with this version:

JS Bin - Collaborative JavaScript Debugging 

[KenBuja]

Have you zoomed in on the map after changing the Switch back to off? The graphics layers aren't hidden and the points aren't retaining their position.

[KellyHutchins]

There are additional issues with the original code including the fact that graphics are added to the map's graphics layer but not cleared. You can clear using this when the off button is clicked. 

       map.graphics.clear();

Although the code should probably be cleaned up to add to either the graphics layer or the map's graphic layer.  Here's a bin showing this in action: 

JS Bin - Collaborative JavaScript Debugging 

[RachelAlbritton]

That appears to be working. I see that the brackets just had to be removed from this line in the stopsGraphic function

var stopsSMS = new SimpleMarkerSymbol().setSize(15).setColor(color);

thank you