Why doesn't this callback return a value in JavaScript?

Question

gsvc.project(params, function (projectedPoints) {
    pt = projectedPoints[0];
});

geometry.addPath(pt);

Can anyone tell me why projectedPoints only returns once an error is thrown? The code doesn't enter the callback and tries to assign pt while it is undefined to an array. This causes the code to error, which is when the callback finally initiates.

I've been trying to reference the code from here, but can't seem to figure out how to get the callback to work like in the xample.

` var map, gsvc, pt;

  require([
    "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
    "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",
    "esri/SpatialReference", "esri/InfoTemplate", "dojo/dom", "dojo/on",
    "dojo/domReady!"
  ], function(
    Map, Graphic, SimpleMarkerSymbol,
    GeometryService, ProjectParameters,
    SpatialReference, InfoTemplate, dom, on
  ) {
    map = new Map("map", {
      basemap: "streets",
      center: [-98.445, 46.147],
      zoom: 3
    });

    gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
    map.on("click", projectToWebMercator);

    function projectToWebMercator(evt) {
      map.graphics.clear();

      var point = evt.mapPoint;
      var symbol = new SimpleMarkerSymbol().setStyle("diamond");
      var graphic = new Graphic(point, symbol);
      var outSR = new SpatialReference(102100);

      map.graphics.add(graphic);

      gsvc.project([ point ], outSR, function(projectedPoints) {
        pt = projectedPoints[0];
        graphic.setInfoTemplate(new InfoTemplate("Coordinates",
          "<span>X:</span>" + pt.x.toFixed() + "<br>" + 
          "<span>Y:</span>" + pt.y.toFixed() + "<br>" + 
          "<input type='button' value='Convert back to LatLong' id='convert'>" +
          "<div id='latlong'></div>"));
        map.infoWindow.setTitle(graphic.getTitle());
        map.infoWindow.setContent(graphic.getContent());
        map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
        on.once(dom.byId("convert"), "click", projectToLatLong);
      });
    }

    function projectToLatLong() {
      var outSR = new SpatialReference(4326);
      var params = new ProjectParameters();
      params.geometries = [pt.normalize()];
      params.outSR = outSR;

      gsvc.project(params, function(projectedPoints) {
        pt = projectedPoints[0];
        dom.byId("latlong").innerHTML = "<span>Latitude: </span> " + 
          pt.y.toFixed(3) + "<br><span>Longitude:</span>" + pt.x.toFixed(3);
      });
    }
  });
</script>`

Stuart Wagner · Answer 1 · 2017-02-06T05:53:00.087

0

You have a variable scope issue. pt needs to be defined outside your callback.

var pt;

gsvc.project(params, function(projectedPoints) {
    pt = projectedPoints[0];
});

geometry.addPath(pt);

EDIT:

If the .project() method is asynchronous, then Arun's answer is the correct approach.

edited Feb 06 '17 at 05:53

answered May 09 '15 at 05:47

Stuart Wagner

1,997
1
14
22

Then it's most likely asynchronous. Try moving the last line inside the callback like Arun suggested. – Stuart Wagner May 09 '15 at 06:08
I've tried that also. It still skips and just fails further down in the code – David May 09 '15 at 06:12
That's odd. Is the callback being executed? Try throwing a `console.log()` in there. – Stuart Wagner May 09 '15 at 06:14
It executes, using chrome developer tools I can see the request being made, but the response just hangs there until the code errors out, it's until then the callback actually executes – David May 09 '15 at 06:19
In that case, I think we'll need to see more of your code to help you. Also, what was the error you mentioned? – Stuart Wagner May 09 '15 at 06:21
The error usually will happen when an undefined array is called. Once it fails, that's when the callback will return the values. @Stuart – David May 11 '15 at 19:38

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

It might be because project is a async method if so

//looks like project is a async method
gsvc.project(params, function (projectedPoints) {
    var pt = projectedPoints[0];
    //do all operations which depends on pt in the callback
    geometry.addPath(pt);
});

//so this part will get executed before the callback is executed so pt won't be defined

How do I return the response from an asynchronous call? - it follows the same principle as ajax requests

edited May 23 '17 at 12:01

Community

1
1

answered May 09 '15 at 05:51

Arun P Johny

384,651
66
527
531

The function gets skipped and errors further down the code before returning to the callback – David May 09 '15 at 06:10
@David that is why all code that depends on value returned by the callback must be inside the callback.. if you can share more details about the code we can have a look – Arun P Johny May 09 '15 at 06:13
I updated the original post to include an example of what I'm trying to accomplish @Arun – David May 11 '15 at 19:39

Why doesn't this callback return a value in JavaScript?

2 Answers2