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

Question

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

Navigation

#1 by (2 votes)

1

Hello, I'm having trouble accessing the objects in an array of json that is passed as a parameter between two-class functions. In the functions that get the array of json, the corresponding variables are like " undefined ".

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

What I do is : access the json array that is saved in a postgresql database via json_control, return this array to the map_controler.js and pass to the map.js 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);

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

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

["id": "2", "age": "14", "sex": "F", "latitude": "- 22,716", "longitude": "- 42,638" id ":" 7 "," age ":" 35 "," sex ":" M "," latitude ":" - 22.7158 "," longitude ":" - 42.6289 " , "age": "20", "sex": "F", "latitude": "- 22.7197", "longitude": "- 42.6145" 30 "," sex ":" M "," latitude ":" - 22.7187 "," longitude ":" - 42.6155 "}, {" id ":" 3 " : "F", "latitude": "- 22.7086", "longitude": "- 42.6213"}]

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

javascript json

asked by anonymous 22.03.2015 / 23:49

1 answer

Why does serialize form return empty textarea value? Repeat loop is not running

score 2 · Accepted Answer

The getJSON method 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 thus the method that calls it:

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

You will not receive the result of the query. One 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
}