1

Olá, estou tendo problemas em acessar os objetos de um array de json que é passado como parâmetro entre funções de duas classes. Nas funções que recebem o array de json, as variáveis correspondentes ficam como "undefined".

Tenho três arquivos:json_control.js(Classe) ; map_control.js e mapa.js(Classe)

O que eu faço é: acessar o array de json que está salvo em um banco postgresql através do json_control, retornar esse array para o mapa_controler.js e repassar para o mapa.js para que ele possa colocar os objetos do array no mapa.

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);

mapa.js

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);
};

Este é o array de json retornado pela página consultas.php:

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

Gostaria de uma solução que mantivesse as responsabilidades de cada classe.

1 Resposta 1

2

O método getJSON é assíncrono. Seu código:

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)
};

Vai completar antes da requisição Ajax estar pronta, e assim o método que o chama:

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

Não vai receber o resultado da consulta. Uma sugestão para refatorar esse código é:

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
}
1
  • Fiz as modificações aqui. Funcionou perfeitamente!
    – regmoraes
    Commented 23/03/2015 às 0:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .