How to pass JSON array as parameter and access its objects in another function?

Question

Hello, I’m having trouble accessing objects from a json array that is passed as a parameter between functions of two classes. In the functions that receive the json array, the corresponding variables are as "Undefined".

I have three files:json_control.js(Class) ; map_control.js and js map.(Class)

What I do is: access the json array that is saved in a postgresql database through json_control, return that array to the mapa_controler.js and forward to the js map. so that it can place the array objects on the map.

json_control.js

function JsonControl() {};

JsonControl.prototype.getJsonData = function(dataLocation){

    $.getJSON(dataLocation, function(mData) {

        return mData;
    });
};

map_control.js

    var mJsonControl = new JsonControl();
    var mMap = new Mapa();

        function initialize() {

            var json = mJsonControl.getJsonData("consultas.php");

            mMap.setMap();
            mMap.setMapElements(json);
        }

    google.maps.event.addDomListener(window, 'load',initialize);

js map.

function Mapa() {

    this.map = {};
    this.mapCanvas =  'map';
    this.mapOptions = {center:{lat: -22.717, lng: -42.624}, zoom: 14};
};

Mapa.prototype.setMapElements = function (mJsonData) {

    var mMap = this.map;
    var elementOptions = {};

    $.each(mJsonData, function(id,data){

        elementOptions = {

            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: mMap,
            center: new google.maps.LatLng(data.latitude, data.longitude),
            radius: Math.sqrt(1)*10
        };

        new google.maps.Circle(elementOptions);
    });
};

Mapa.prototype.setMap = function () {

    this.map = new google.maps.Map(document.getElementById(this.mapCanvas), this.mapOptions);
};

This is the json array returned by the page php queries.:

[{"id":"2","age":"14","sex":"F","latitude":"-22.716","longitude":"-42.638"},{"id":"7","age":"35","sex":"M","latitude":"-22.7158","longitude":"-42.6289"},{"id":"0","age":"20","sex":"F","latitude":"-22.7197","longitude":"-42.6145"},{"id""":"1","age":"30","sex":"M","latitude":"M","latitude"-22.7187","longitude":"-42.6155"},{"id":"3","age":"25","sex":"F","latitude":"-22.7086","longitude":"-42.6213"}]

I would like a solution that maintains the responsibilities of each class.

Answer 1

The method getJSON is asynchronous. Your code:

JsonControl.prototype.getJsonData = function(dataLocation){
    $.getJSON(dataLocation, function(mData) {
        return mData; // Esse retorno não está indo pra lugar nenhum
    });
    // Não está retornando nada (i.e. undefined)
};

It will complete before the Ajax request is ready, and so the method that calls it:

var json = mJsonControl.getJsonData("consultas.php");

You will not receive the result of the query. A suggestion to refactor this code is:

JsonControl.prototype.getJsonData = function(dataLocation, callback){
    $.getJSON(dataLocation, function(mData) {
        callback(mData); // Faz alguma coisa com o resultado quando ele estiver pronto
    });
    // Continua não retornando nada
};

...

function initialize() {
    mJsonControl.getJsonData("consultas.php", function(json) {
        // Só vai executar após a chamada Ajax estiver pronta
        mMap.setMap();
        mMap.setMapElements(json);
    });
    // A função initialize termina, mas o código acima ainda não executou
}