ReactJS: Unable to grab data from a function

Question

I am currently having trouble accessing a value within a function but this is OUTSIDE OF A PROMISE.

Here is my code:

 service.getDistanceMatrix({
        origins: ["Waterloo ON"],
        destinations: destination,
        travelMode: 'DRIVING',
        avoidHighways: false,
        avoidTolls: false
      }, function(response, status){
       if (status == 'OK') {
         var origins = response.originAddresses;
         var destinations = response.destinationAddresses;

         for (var i = 0; i < origins.length; i++) {
           var results = response.rows[i].elements;
           for (var j = 0; j < results.length; j++) {
             var element = results[j];
             var distance = element.distance.text;
             var duration = element.duration.text;
             var from = origins[i];
             var to = destinations[j];
             // _this.
             // console.log(distance);
             location.distFinal = distance;

             location.setState({
               dist: distance
             })
             // return distance;
             // return distance;
             // console.dir(distance)
             // tryA = distance;
           }
         }

       }
     })
     console.dir(location);
     console.dir(location.distFinal);

I am trying to access the distance so I did console.dir(location.distFinal) but it gave me an undefined value. However, when I did console.dir(location), it gave me the object with distFinal as a value....

This is what I mean:

Line 126 is the console.dir(location) and line 127is console.dir(location.distFinal)

Please! I just want to be able to extract the distance!

CertainPerformance · Accepted Answer · 2018-03-23 03:20:29Z

1

It's not in a promise currently, so try converting it into a promise - that way you can resolve once the asynchronous code has the data you want. Then you can .then on the promise to run code after it's resolved.

//  location is defined somewhere up here
new Promise((resolve, reject) => {
  service.getDistanceMatrix({
    origins: ["Waterloo ON"],
    destinations: destination,
    travelMode: 'DRIVING',
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status){
    if (status == 'OK') {
      var origins = response.originAddresses;
      var destinations = response.destinationAddresses;

      for (var i = 0; i < origins.length; i++) {
        var results = response.rows[i].elements;
        for (var j = 0; j < results.length; j++) {
          var element = results[j];
          var distance = element.distance.text;
          var duration = element.duration.text;
          var from = origins[i];
          var to = destinations[j];
          // _this.
          // console.log(distance);
          location.distFinal = distance;

          location.setState({
            dist: distance
          })
          // return distance;
          // return distance;
          // console.dir(distance)
          // tryA = distance;
        }
      }
      // looping is done
      resolve();
    }
  })
}).then(() => {
  console.dir(location);
  console.dir(location.distFinal);
});

The reason you can console.dir is because Chrome's console requests the state of the object when you open the console, rather than displaying the state of the object as it was.

edited Mar 23, 2018 at 3:20

answered Mar 23, 2018 at 3:16

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

its.david Over a year ago

I can't seem to get the value out of the .then() function

CertainPerformance Over a year ago

If you want then to resolve with a value, then pass that value into the resolve function. For example resolve(someVar) and then you could do .then(someVar => { /* interact with someVar */ }). Here, you might be looking to resolve with an array of distances or something?

its.david Over a year ago

Thank you, that worked but how do I get it out of the promise? Like res is now a value but I want to get that specific value out of the promise/then function

CertainPerformance Over a year ago

If you want to access it on the higher level, you'll have to use await, and you'll have to be in an async function. Eg const resolveValue = await new Promise(resolve ... ... ... resolve(resolveValue) ...

Collectives™ on Stack Overflow

ReactJS: Unable to grab data from a function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related