CODEWITHSUNDEEP
javascriptreactjsfunction
its.david
its.david

Reputation: 2235

ReactJS: Unable to grab data from a function

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:

enter image description here

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!

Upvotes: 0

Views: 50

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370769

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.

Upvotes: 1

Related Questions