Problems with get metod of json file

Question

i have this code, same javascript function that i use to create a google map with userMarker and same icon that will be loaded when the map is initialize. the number of icons and they're position and infowindow data are unknow and all data will be get from an external json file

this is the code :

var oggetto = $.getJSON("eventi.json", function (data) {
    oggetto = data;
});


function initialize() {
    var dueTorri = new google.maps.LatLng(44.493392, 11.346129);
    var myOptions = {
        zoom: 14,
        center: dueTorri,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("main"), myOptions);

    var userMarker = new google.maps.Marker({
        map: map,
        draggable: true,
        title: "Tu sei qui",
        position: dueTorri,
        icon: "marker/marker_eccoti.png"
    });
    google.maps.event.addListener(userMarker, 'dragend', function (event) {
        var newLatLong = userMarker.getPosition()
        map.panTo(newLatLong);
        var lati = newLatLong.lat();
        var longi = newLatLong.long();
    });

    setIcons(map, oggetto);
}


function setIcons(map, dati) {
    for (var i = 0; i < dati.events.length; i++) {
        var areaEventi = dati.events[i];
        var idEvento = areaEventi.event_id;
        var tipo = areaEventi.type.type;
        var sottotipo = areaEventi.type.subtype;
        var descrizioni = new Array();
        for (var j = 0; j < areaEventi.description.length; j++) {
            descrizioni[j] = areaEventi.description[j];
        }
        var tempoIniziale = areaEventi.start_time;
        var tempoUltima = areaEventi.freshness;
        var stato = areaEventi.status;
        var attendibilita = areaEventi.reliability;
        var numeroNotifiche = areaEventi.number_of_notifications;
        var lat_luogo = areaEventi.locations.lat;
        var lng_luogo = areaEventi.locations.lng;
        var myLatLng = new google.maps.LatLng(lat_luogo, lng_luogo);
        if (tipo == "problemi_ambientali") {
            var icon_image = {
                url: 'marker/marker_ambiente.png'
            };
        }
        if (tipo == "reati") {
            var icon_image = {
                url: 'marker/marker_reato.png'
            };
        }
        if (tipo == "eventi_pubblici") {
            var icon_image = {
                url: 'marker/marker_evento.png'
            };
        }
        if (tipo == "emergenze_sanitarie") {
            var icon_image = {
                url: 'marker/marker_soccorsi.png'
            };
        }
        if (tipo == "problemi_stradali") {
            var icon_image = {
                url: 'marker/marker_strada.png'
            };
        }


        var icone = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: icon_image,
            title: tipo,
            zIndex: i

        });
        var contentString = '<div>' +
            '<h3 id="tipologia">' + tipo + '</h3>' +
            '<h4 id="subtipo">' + sottotipo + '</h4>' +
            '<table>' +
            ' <tr>' +
            ' <td id="commento1">' + descrizioni[0] + '</td>' +
            '</tr>' +
            ' <tr>' +
            '<td id="commento2">' + descrizioni[1] + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td id="commento3">' + descrizioni[2] + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td id="commento4">' + descrizioni[3] + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td id="commento5">' + descrizioni[4] + '</td>' +
            '</tr>' +
            '</table>' +
            '<form method="post" action="">' +
            '<p><input type="radio" name="status" value="Open" />Open<input type="radio" name="status" value="Closed" />Closed</p>' +
            '<p>Descrizione:<input type="text" name="descrizione" /></p>' +
            '<p><input type="submit" name="submit" value="Aggiorna" /></p>' +
            '</form>' +
            '</div>';
        var infowindow = new google.maps.InfoWindow();

        bindInfoW(icone, contentString, infowindow);

        function bindInfoW(icone, contentString, infowindow) {
            google.maps.event.addListener(icone, 'click', function () {
                infowindow.setContent(contentString);
                infowindow.open(map, icone);

            });

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

and this is an exemple of json with 2 events :

{
    "request_time": 1368095111,
    "result": "Messaggio di servizio",
    "from_server": "",
    "events": [
        {
            "event_id": "902438",
            "type": {
                "type": "problemi_stradali",
                "subtype": "incidente"
            },
            "description": ["ommioddio", "come na catapulta", "", "", ""],
            "start_time": 1368045665,
            "freshness": 1368085800,
            "status": "open",
            "reliability": 0.8,
            "number_of_notifications": 2,
            "locations": {
                "lat": 37.42291810,
                "lng": -122.08542120
            }

            },
        {
            "event_id": "459459",
            "type": {
                "type": "problemi_stradali",
                "subtype": "incidente"
            },
            "description": ["mi hanno tamponato", "dottore chiami un dottore", "che guaio", "descr4", "descr5"],
            "start_time": 1368105698,
            "freshness": 1368106058,
            "status": "open",
            "reliability": 1.0,
            "number_of_notifications": 4,
            "locations": {
                "lat": 37.42291810,
                "lng": -122.08542120
            }

         }
    ]
}

i use easyPhP to load the html file ,but when it load, there is all except icons.. Anyone know what's the problem? thanks

Noticed that i get this error from chrome console Uncaught TypeError: Cannot read property 'length' of undefined refered to line 46 — Roberto, Jun 17 '13 at 14:33
ok i put the getJson code into the setIcon function and now i get the same error but no longer with length, but with events — Roberto, Jun 17 '13 at 14:54
You should edit these comments into your question if they add useful information to the question itself. Also, since links can go stale, you should probably edit the *relevant* parts of the code giving you issues into your question as well. Also, in the Chrome dev console (and pretty much all other dev consoles) you can click the line number on the right of the error to navigate to the line that caused the error. You're likely doing `someVar.length`, and `someVar` is `undefined`. — ajp15243, Jun 17 '13 at 15:10

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

This piece of code is your problem:

var oggetto = $.getJSON("eventi.json", function(data) {
    oggetto = data;
});

You cannot expect oggetto to contain the data after that - it will just contain the request object which will maybe get overwritten somewhen in the future. See How do I return the response from an asynchronous call?.

Instead, put the call to setIcons in the callback - when datais loaded.

edited May 23 '17 at 12:21

Community

1
1

answered Jun 17 '13 at 15:44

Bergi

630,263
148
957
1,375

i created a function that contained getJson with function setIcon in the callback and called it in the initialize function, now it give me no error but doesn't even load icons – Roberto Jun 17 '13 at 17:41
Hm, I can't see what is wrong there without a demo. Try to `console.log()` your values in the relevant parts to see what is happening. – Bergi Jun 17 '13 at 19:51
ok i placed into callback the consol.log(data) and it showed me this http://pastebin.com/BtPh5TWx – Roberto Jun 17 '13 at 20:57
But that looks good, so there must be some other kind of problem? – Bergi Jun 17 '13 at 21:22
really i'm not understanding where is the problem – Roberto Jun 17 '13 at 23:20

Anil Gupta · Answer 2 · 2013-06-18T07:50:03.167

0

This should help you
    Object.keys(dati.events).length

i don't think any problem with you code, You need to check for object present i.e is exist or not

var dati_events JSON.parse(dati.events);
alert(dati_events.dati_events.length);

yuo can also refer http://developer.appcelerator.com/question/131660/jsonparse-cannot-return-length-undefined

edited Jun 18 '13 at 07:50

answered Jun 17 '13 at 15:48

Anil Gupta

632
4
16

Note that [`Object.keys`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) is [not supported in IE8 and below](http://msdn.microsoft.com/en-us/library/ie/ff688127(v=vs.94).aspx). – ajp15243 Jun 17 '13 at 17:21

Problems with get metod of json file

2 Answers2