How to get data out of JQuery getJSON callback

Question

I need to get the JSON object data out of the callback function so that I can process it later in page, not within the callback as I am now. It must be obvious to everyone else as I can't see anything written about it. Can anyone tell me how to do it?

Here is my code:

<script type="text/javascript" src="/site_media/js/jstree/_lib/jquery.js"></script>  
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
            zoom: 4,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        return map;
    }

    function add_marker(map, lat, long) {
        var marker_image='/site_media/images/map_marker.png';
        var myLatlng = new google.maps.LatLng(lat,long);
        title='title';
        var marker = new google.maps.Marker({
            position: myLatlng, 
            map: map, 
            title:title,
            icon:marker_image
        }); 
        //map.panTo(myLatlng);
    }

    //window.onload=initialize();
    setTimeout('map=initialize();',2000);

    $.getJSON("/ajax/get", function(data) {
        $.each(data, function(i,val) {
            latitude = val.fields.latitude;
            longitude = val.fields.longitude;
             add_marker(map, latitude, longitude);
        });
    });
</script>
<div id="map_canvas" style="width: 500px; height: 300px"></div>

Answer 1

Rich, its actually much simpler than you think (at least it seems that way). I am assuming your markers have an id or something. You may need to adjust this to work just how you want:

var lastMarkerId; // We'll store the id here, starts as undefined

function refresh_markers () {
  $.getJSON("/ajax/get", { marker_id: lastMarkerId }, function(data) {
    $.each(data, function(i,val) {
        latitude = val.fields.latitude;
        longitude = val.fields.longitude;
        add_marker(map, latitude, longitude);
    });
    if (data.length) {
       // grab the last item and store its ID
       lastMarkerId = data.pop().id;
    }
  });
}

Then on your server, do something like: "If marker_id has a value, find every marker after that id, otherwise, return them all".

Remember! Each marker needs an id for my code to work:

[{id:1, fields: {latitude: "..", longitude: ".." }}]

Answer 2

You need to execute $.getJSON() (and other initialization stuff which depends on the presence of certain HTML elements in the document) during window.onload, or more the jQuery way, during $(document).ready(). Otherwise it is indeed been executed too early, namely immediately when the webbrowser retrieves the JS code, far before the HTML document is finished loading.

$(document).ready(function() {
    $.getJSON("/entries/get_race_entries/1/demo/1", function(data) {
        // ...
    });
});