Create InfoTemplate content from 2 separate esriRequests?

[RachelAlbritton]

I am accessing a service from another provider to create part of an application. I make an esriRequest to grab Lat/Long coordinates and create a graphics. This initial request also contains some attributes that I would like to display in the InfoTemplate (and have done so successfully). However, there is a separate request that is needed to fetch the rest of the attributes that I would like to display within the same infoTemplate. Is this even possible?

If not, I would most likely choose to use the data from the SECOND request to show in the infoTemplate and have not had any success in being able to do so. Using Chrom dev tools I can see the request being successfully made, but the infoTemplate remains empty. I think its because I'm not correctly passing in the attributes parameter to the graphic when its getting created. I thought that by returning the 'vehicleTemplateArray' I would be able to achieve this but its not working. How do I make this work?

Thank you.

               //Create Toggles
               var vehicleInterval;
               
               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).then(function(vehicleResponse){
                         vehicleGraphicFunction(new Color([255,0,0]), vehicleResponse);
                         });
                         
                         vehicleInterval = setInterval(function(){
                              vehicleLocationGraphicsLayer.clear();
                              esriVehicleRequest(15).then(function(vehicleResponse){
                              vehicleGraphicFunction(new Color([255,0,0]), vehicleResponse);
                              });     
                              }, 3000);
                    }
                         
                         else 
                         {
                              
                         //Stop setInterval
                         clearVehicleInterval(vehicleInterval);
                         
                         //Clear graphics
                         vehicleLocationGraphicsLayer.clear();
                         
                         //Hide graphics layer
                         vehicleLocationGraphicsLayer.hide();
                         
                         }
                    });
                    

               function clearVehicleInterval (graphicsLayer){
                              clearInterval(graphicsLayer);
                         }
                              
               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);
                    return vehicleRequest;
               }
     
               function vehicleRequestSucceeded(data) {
                    var vehicleArray = [];
                    //Get vehicle points
                    for (i = 0; i < data.length; i++) {
                         vehicleArray.push(data[i]);
                    }
                    return vehicleArray;
               }
               
               function vehicleGraphicFunction(color, data) {
                    var vehicleObjects = data;
                    
                    for (i = 0; i < vehicleObjects.length; i++) {
                         
                         //Create Symbology
                         var vehicleSMS = new SimpleMarkerSymbol().setSize(30).setColor(new Color(color));
                         
                         //Create InfoTemplate
                         //These attributes are part of the intial esriRequest and I CAN show them 
                         //I would like to combine this with a second request OR only show the second request
                         //var vehicleInfoTemplate = new InfoTemplate ("<b>Name: </b>"+vehicleObjects.Name, "<b>Speed: </b>"+Math.round(vehicleObjects.GroundSpeed)+"mph");
                                                  
                         //Create Graphic
                         var vehicleGraphic = new Graphic(new Point(vehicleObjects[i].Longitude, vehicleObjects[i].Latitude, map.SpatialReference), vehicleSMS, vehicleInfoTemplateRequestSucceeded, esriVehicleInfoTemplateRequest(data[i].VehicleID));
                         
                         //Add graphics to graphics layer
                         map.getLayer(vehicleLocationGraphicsLayer);
                         vehicleLocationGraphicsLayer.add(vehicleGraphic);
                         vehicleLocationGraphicsLayer.show();
                    }
               }
               
               function esriVehicleInfoTemplateRequest (vehicleID) {
                    var vehicleInfoTemplateRequest = new esriRequest ({
                         url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetVehicleRouteStopEstimates",
                         content: {
                              vehicleIDStrings: vehicleID, //comma seperated integers of vehicle IDs to retrieve - GetMapVehiclePoints method
                              quantity: 1,
                         },
                         handleAs: "json",
                         callbackParamName: "method"
                    });
                    vehicleInfoTemplateRequest.then(vehicleInfoTemplateRequestSucceeded, requestFailed);
                    return vehicleInfoTemplateRequest;
               }
               
               function vehicleInfoTemplateRequestSucceeded (data){
                    console.log(data);
                    var vehicleTemplateArray = [];
                    for (i = 0; i < data.length; i++){
                         vehicleTemplateArray.push(data[i]);     
                         var vehicleInfoTemplate = new InfoTemplate ("<b>VehicleID: </b>"+data[i].VehicleID, data[i].Estimates[i].Description+": "+data[i].Estimates[i].EstimateTime);     
                    }
                    //console.log(vehicleTemplateArray);
                    return vehicleTemplateArray;     
                    return vehicleInfoTemplate;
               } 
               
               function requestFailed(error) {
                 console.log("Error: ", error.message);
               }
               
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[KellyHutchins · Accepted solution]

There are a few issues with your sample including the fact that there are a few lines of unreachable code. One example of unreachable code is line 117. Line 116 returns to the calling function so line 117 is never executed. One way to catch these issues is to use a code quality checking tool like JSHint. You can use an online tool like JSHint, a JavaScript Code Quality Tool  or check and see if there is a plug-in available for your development environment.  

As far as your code here's an example that (I think) will do what you need. 

JS Bin - Collaborative JavaScript Debugging