Doubt Scope of Javascript Variables

0

In the code below I try to use the lastLatitude and lastLongitude variances outside the local scope. I need them in the beginning. I've tried many things, can anyone help me understand?

<script>
        var lastLongitude = "";
        var lastLongitude = "";

        function initMap() {
            $.ajax({
                type: "GET",
                dataType: "JSON",
                url: "locations.json",
                success: function processJSON(data) {
                    last = $(data).last();
                    last.each(function(i, item) {
                        lastLatitude = item.latitude;
                        lastLongitude = item.longitude;
                    });
                }
            });
            var initial = {
                lat: -22.9721291, // PRECISO DELAS AQUI
                lng: -43.7081429  // PRECISO DELAS AQUI
            };

            var finish = {
                lat: -22.986,
                lng: -43.6931
            };

            var map = new google.maps.Map(document.getElementById('map'), {
                center: initial,
                scrollwheel: false,
                zoom: 7
            });

            var directionsDisplay = new google.maps.DirectionsRenderer({
                map: map
            });



            // Set destination, origin and travel mode.
            var request = {
                origin: initial,
                destination: finish,
                travelMode: 'DRIVING'
            };

            // Pass the directions request to the directions service.
            var directionsService = new google.maps.DirectionsService();
            directionsService.route(request, function(response, status) {
                if (status == 'OK') {
                    // Display the route on the map.
                    directionsDisplay.setDirections(response);
                }
            });
        }
    </script>
    
asked by anonymous 02.03.2017 / 18:56

1 answer

1

You should only execute the rest of the code, after receiving the asynchronous response of your ajax call, then you can pick up the item into the function and pick up the values directly.

I did not have to test, but I believe that should work.

<script>
var lastLongitude = "";
var lastLongitude = "";

function initMap() {
    $.ajax({
        type: "GET",
        dataType: "JSON",
        url: "locations.json",
        success: function processJSON(data) {
            last = $(data).last();
            last.each(function(i, item) {
              resumeTasks(item)
            });
        }
    });
    
    function resumeTasks(item) {
      var initial = {
          lat: item.latitude, // PRECISO DELAS AQUI
          lng: item.longitude  // PRECISO DELAS AQUI
      };

      var finish = {
          lat: -22.986,
          lng: -43.6931
      };

      var map = new google.maps.Map(document.getElementById('map'), {
          center: initial,
          scrollwheel: false,
          zoom: 7
      });

      var directionsDisplay = new google.maps.DirectionsRenderer({
          map: map
      });

      // Set destination, origin and travel mode.
      var request = {
          origin: initial,
          destination: finish,
          travelMode: 'DRIVING'
      };

      // Pass the directions request to the directions service.
      var directionsService = new google.maps.DirectionsService();
      directionsService.route(request, function(response, status) {
          if (status == 'OK') {
              // Display the route on the map.
              directionsDisplay.setDirections(response);
          }
      });
    
    }
    
}
</script>
    
02.03.2017 / 19:12