returned value from a callback function

Question

I am having some trouble while getting the returned value by the callback function ("dist" = undefined).....I've tried to get the value so many times but still undefined. However, I can get it from the console....Please Some Body can help!!

calculateDistance = (place, me) => {
        var origin = new window.google.maps.LatLng(
          parseFloat(place.latitude)
          parseFloat(place.longitude)
        );

        var destination = new window.google.maps.LatLng(
          parseFloat(me.latitude),
          parseFloat(me.longitude)
        );

        var service = new window.google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
          {
            origins: [origin],
            destinations: [destination],
            travelMode: window.google.maps.TravelMode.DRIVING,
            avoidHighways: false,
            avoidTolls: false,
            unitSystem: window.google.maps.UnitSystem.metric
          },
          function(response, status) {
            if (
              status === "OK" &&
              response.rows[0].elements[0].status !== "ZERO_RESULTS"
            ) {
              let dist = parseFloat(response.rows[0].elements[0].distance.text);
              return dist;
            } else {
              alert("Error: " + status.toString());
            }
          }
        );
      };

Have you tried console logging the whole object? Eg. add `console.log('response: ', response) ...after this line: `let dist = parseFloat(response.rows[0].elements[0].distance.text);` You can then expand the response object in the console to make sure the value exists within the object. — Oli C, Oct 03 '19 at 15:58

score 0 · Accepted Answer · answered Oct 03 '19 at 16:07

0

You can't force Google's function to return your callback value, so the best you can do is call another function from inside your callback.

const setDist = (dist) => {
   //persist your dist somehow, maybe setState?
   this.setState({distance: dist});
}

service.getDistanceMatrix(
      {
        origins: [origin],
        destinations: [destination],
        travelMode: window.google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false,
        unitSystem: window.google.maps.UnitSystem.metric
      },
      function(response, status) {
        if (
          status === "OK" &&
          response.rows[0].elements[0].status !== "ZERO_RESULTS"
        ) {
          let dist = parseFloat(response.rows[0].elements[0].distance.text);
          setDist(dist);
        } else {
          alert("Error: " + status.toString());
        }
      }
    );

answered Oct 03 '19 at 16:07

Brian Thompson

13,263
4
23
43

Hey man!! this ain't working....I couldn't make a call to the setDist function inside the callback function ==> when I console log this.state.distance it's undefined. – Ahmed Oct 04 '19 at 08:17
Can you console log the function itself? After `setDist(dist)` `console_log(setDist)`. I am curious if it is defined. Also where is this `calculateDistance` located? Is it inside your class component? Or are you importing it? – Brian Thompson Oct 04 '19 at 13:06
Hi there !! I am calling calculateDistance inside my class component although I wanna return the value of setDist(dist) I don't wanna show the function value to the console because I already done it. Thank's Brian – Ahmed Oct 07 '19 at 09:24

returned value from a callback function

1 Answers1