Accessing a javascript variable outside its assigned method

Question

I want to access the javascript variable called locations outside of its assigned method.

Javascript code:

$(document).ready(function() {
    var locations;
    console.log('document ready');
    function initializeMap() {
      $.ajax({url: "getlocation.php",
            success: function(result){
              locations = $.parseJSON(result);
              alert(locations);
            }
      });

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

  }
  initializeMap();
});

How can I get the json parsed data passed to the locations variable so I can get data outside of its assigned method and into the loop?

Here is the finished code that solves my problem:

$(document).ready(function() {

    console.log('document ready');

    function initializeMap() {
    var locations;
    $.ajax({url: "getlocation.php",

            success: function(result){
            alert(result);
             locations = $.parseJSON(result);
            alert(locations);
             }
        });

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

  }
  initializeMap();
});

"Pass by Reference" and "Pass by Value" are two programming terms that describe how a method behaves when passing a variable into a method.

score 1 · Accepted Answer · answered Oct 21 '15 at 05:24

1

The function is called after excecuting the block of code, so the var location was assigned a value after it was adressed, this is why you saw undefined. There are two ways to fix this, 1) put the block of code inside the function or 2) call the function directly after initializing it ! General tip: do not use the ready function instead put the script just before body tag ends and avoid many problems !

answered Oct 21 '15 at 05:24

Noctisdark

350
3
17

Tried this, didnt work :(. Still the variable locations is undefined. – toing_toing Oct 21 '15 at 05:38
1

Can u write the code after modification ! – Noctisdark Oct 21 '15 at 05:51
updated the question. please heck – toing_toing Oct 21 '15 at 05:58
1

Try to call the function just after execution. – Noctisdark Oct 21 '15 at 06:01
Not clear to me @Noctisdark , where is 'just after execution' exactly? – toing_toing Oct 21 '15 at 06:06
After initialization – Noctisdark Oct 21 '15 at 06:08
you mean Initializing the locations variable? – toing_toing Oct 21 '15 at 06:09
Worked after I called the function inside the ajax call. Thanks for the help. :) – toing_toing Oct 21 '15 at 06:56

Accessing a javascript variable outside its assigned method

1 Answers1