sending json object to google maps vai ajax response from php script - php

Question

I'm stumped. I am not sure why my JSON object is not being parsed by my callback function.
I am getting the following error in the console log:
TypeError: data is undefined
for (var i = 0, len = data.features.length; i < len; i++) {
Your help is greatly appreciated!
The ajax code:
$.ajax({
type : 'POST',
url : 'timezone.php',
dataType : 'json',
data : { "func" : "getFirstAndNext", epochTime : browserUTC },
success : function( data ) {
console.log( data.first );
console.log( data.next );
sector_callback( data.first );
// do something with data.myObject.memberVariable
},
error : function ( XMLHttpRequest, textStatus, errorThrown ) {
// didn't work!
}
});
The PHP script:
<?php
//header('Content-Type: application/json; charset=utf-8');
function getFileStamp($type) {
$timeInterval = 15; // minutes
$now = round($_POST['epochTime'] / 1000);
$now = round(1352324181061 /1000 ); // 3:36:21
//$now = round(1352238011.067);
$offsetInSeconds = $timeInterval * 60;
$offsetInMillis = $timeInterval * 60 * 1000;
$currentFileTime = $now - $now % ($timeInterval * 60);
//$currentFileTime = ($now - ($now % $offsetInMillis))/1000.0; // this returns epoch time in $timeInterval minutes.
$nextFileTime = $currentFileTime + $offsetInSeconds; // next epoch time for file;
return ($type == 0) ? $currentFileTime : $nextFileTime;
}
$currentFileTime = getFileStamp(0) . '.json';
$nextFileTime = getFileStamp(1) . '.json';
$res = array();
$res['file1'] = file_get_contents($currentFileTime);
$res['file2'] = file_get_contents($nextFileTime);
echo json_encode(array("first"=>$res['file1'],"next"=>$res['file1'])); //takes contents and converts it to json object
?>
The sector callback function:
var allPolygons = [];
function sector_callback() {
//console.log(data);
var bounds = new google.maps.LatLngBounds();
for (var i = 0, len = data.features.length; i < len; i++) {
var coords = data.features[i].geometry.coordinates[0];
siteNames = data.features[i].properties.Name; // added for site names
var path = [];
for ( var j = 0, len2 = coords.length; j < len2; j++ ){ // pull out each set of coords and create a map object
var pt = new google.maps.LatLng(coords[j][1], coords[j][0])
bounds.extend(pt);
path.push(pt);
}
var polygons = new google.maps.Polygon({
path: path,
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#000000",
fillOpacity: 0.35,
map: map
});
createClickablePoly(polygons, siteNames);
google.maps.event.addListener(polygons, 'mouseover', function() {
var currentPolygon = this;
currentPolygon.setOptions({
fillOpacity: 0.45,
fillColor: "#FF0000"
})
});
google.maps.event.addListener(polygons, 'mouseout', function() {
var currentPolygon = this;
currentPolygon.setOptions({
fillOpacity: 0.35,
fillColor: "#000000"
})
});
allPolygons.push(polygons);
}
}

Answer 1

Going off only what I can see here, I'm not seeing how your sector_callback() can access the data anyway. When jQuery passes in the data, if all else is well, your console should log those properties just fine. But when you pass some of that data to your sector_callback(), it's getting lost. The reason is that your sector_callback() either needs to read the arguments[] array to get it, or you need to change the function signature to sector_callback(data).
In your jQuery block, pass data and not data.features:
sector_callback( data );
And change your own callback signature:
function sector_callback(data) {
console.log(data); // will log the whole chunk of the server data returned
...
}
This is because data is in a closure when it comes back to your jQuery callback. Even if you've declared it somewhere outside of that closure, it's going to retain local scope and cannot be accessed by your other function unless you pass it explicitly.
Hope I've understood the crux of the problem here and this was helpful ...