CODEWITHSUNDEEP
javascriptreactjsecmascript-6
its.david
its.david

Reputation: 2235

Unable to Reach a Value..... ReactJS

I am currently having trouble accessing a value within a function.

Here is my code:

distanceBool = (event) => {
    console.dir(event);

    let address = ["Toronto, ON, CA"];

    let destination = ["Vancouver"];

    let location = this;

    let service = new window.google.maps.DistanceMatrixService();
    new Promise((resolve)=>{
      resolve(
        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];

             location.distFinal = distance;

             location.setState({
               dist: distance
             })

           }
         }

       }
     })

      )
    }).then((res)=>{
      // console.log(res)
      // console.dir(location);
      console.dir(location);
      console.dir(location.distFinal);
      // console.log("hello")
    })


}

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 132 is the console.dir(location) and line 133 is console.dir(location.distFinal)

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

Upvotes: 0

Views: 27

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370769

Your top-level promise resolves immediately - you probably want to resolve only once the asynchronous code inside finishes.

new Promise((resolve)=>{
  service.getDistanceMatrix({
    origins: ["Waterloo ON"],
    destinations: destination,
    travelMode: 'DRIVING',
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status){
    if (status !== 'OK') return;
    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];

        location.distFinal = distance;
        location.setState({
          dist: distance
        })
      }
    }
    // all the looping is done:
    resolve();
  })
}).then((res)=>{
  // console.log(res)
  // console.dir(location);
  console.dir(location);
  console.dir(location.distFinal);
  // console.log("hello")
})

Upvotes: 1

Related Questions