javascript aide google maps v3 app - ordre des instructions

Question

Fondamentalement, je fais une application web mobile agréable et simple pour un couple de mes amis. Il utilise certaines bases de données en ligne pour stocker les données de position des magasins. J'ai les bases de données fonctionnant comme un charme. Aucun problème là-bas. En fait, tout fonctionne, sauf que tout se passe dans le mauvais ordre, je pense. Les données de la base de données doivent être stockées dans un tableau, puis les objets de ce tableau sont affichés à l'écran. Cependant, en utilisant certains journaux de console, j'ai trouvé que les données sont affichées, puis récupérées dans la base de données, puis les tableaux sont remplis. Mais peu importe ce que je fais, je ne peux pas le faire fonctionner! Voici mon code:

var latOfSpots; 
    var lngOfSpots; 
    var nameOfSpots; 
    var spotArray; 
    var spotLatLng; 
    var spotCollection; 
    var markers; 
    var Spot; 
    var spot; 

    function init() { 

//-------------------------- INITIATE SPOT VARIABLES ---------------------------// 
     map = new google.maps.Map2(document.getElementById("map")); 
     latOfSpots= new Array(51.14400,51.02295); 
     lngOfSpots= new Array(0.25721,0.26450); 
     nameOfSpots= new Array('Tescos', 'Sainsburys'); 
     spotLatLng= new Array(); 
     markers= new Array(); 
     Spot = Parse.Object.extend("Spot"); 
     spot = new Spot(); 

//----------------- GET DATA FROM THE PARSE.COM DATABASE ---------------------// 


//---------------------- DISPLAY ARRAY DATA ON MAP ---------------------------//   

     GetData(); 
     DisplayData(); 

//----------------------- SET MAP SETTINGS -----------------------------------// 
     map.setCenter(spotLatLng[0],8); 

     //map.addControl(new google.maps.LargeMapControl()); 

     map.addControl(new google.maps.MapTypeControl()); 



    }; //END OF INIT FUNCTION ------------------------------------------------// 

    google.setOnLoadCallback(init); 

//------------------- PRIMARY FUNCTION TO GET DATA FROM DATABASE ---------------// 
    function GetData() 
    { 
       var query = new Parse.Query(Spot); 
       spotCollection = query.collection(); 
       spotCollection.fetch({ 
        success: function(spotCollection) { 
        // spotCollection.toJSON() 
        // will now be an array of objects based on the query 
        FillArrays(); 
        console.log('data retreived' + spotCollection); 
        } 
     }); 
    } 

//----------------- FUNCTION TO LOAD DATABASE INTO ARRAYS -------------------// 
    function FillArrays() 
    { 
      spotArray = spotCollection.toJSON(); 
       for (var j = 0; j<spotArray.length; j++) 
       { 
        latOfSpots.push(spotArray[j].Latitude); 
        lngOfSpots.push(spotArray[j].Longitude); 
        nameOfSpots.push(spotArray[j].Name); 
       } 
    } 

//------------------------ FUNCTION TO DISPLAY ALL ARRAY DATA ONSCREEN -----------------// 
    function DisplayData() 
    { 
     for(var i = 0; i<latOfSpots.length; i++) 
     { 
      spotLatLng[i] = new google.maps.LatLng(latOfSpots[i], lngOfSpots[i]); 

        for(var x = 0; x<latOfSpots.length; x++) 
        { 
         markers[x] = new google.maps.Marker(
         spotLatLng[i], { 
         "draggable":false, 
         "title":nameOfSpots[i], 
         }); 
         map.addOverlay(markers[x]); 
        } 
     } 

    console.log('data displayed'); 
    } 

Answer 1

Votre requête de base de données est asynchrone. Vous devez utiliser les données dans la fonction de rappel Get_Data (après son retour du serveur). Actuellement, vous essayez de l'utiliser avant que le serveur ne le renvoie.

//------------------- PRIMARY FUNCTION TO GET DATA FROM DATABASE ---------------// 
    function GetData() 
    { 
       var query = new Parse.Query(Spot); 
       spotCollection = query.collection(); 
       spotCollection.fetch({ 
        success: function(spotCollection) { 
        // spotCollection.toJSON() 
        // will now be an array of objects based on the query 
        FillArrays(); 
        console.log('data retreived' + spotCollection); 
        DisplayData(); 
        } 
     }); 
    }