Trying to get json_encode array from PHP with AJAX into a Javascript function

Question

In my PHP file, I create an array of arrays, and use json_encode to make this array usable in javascript. When I echo this direction within the tags it works perfectly. However, I need the PHP to be run at regular intervals (I'm using setTimeout), so I'm trying to use AJAX to call the php and get that array to be used in the javascript function.

Here is the PHP:

$bubbles = array();
$result = mysql_query("SELECT text, lat, lng FROM bubbles");
while($row = mysql_fetch_array($result)){
$newbubble = array($row[0],$row[1],$row[2],'female-2.png');
$bubbles[] = $newbubble;
}
$js_array =  json_encode($bubbles);
echo"$js_array";

And here is the javascript/AJAX portion in question:

setTimeout(initializeMaps, 5000);

function initializeMaps() {
var markers;
var ajax;
ajax=new XMLHttpRequest();
ajax.onreadystatechange=function()
  {
  if (ajax.readyState==4 && ajax.status==200)
    {
var markers = ajax.responseText;
    }
  }
ajax.open("GET","ajax-getbubbles.php",true);
ajax.send();


/*The markers variable needs to be used in the following code*/
var iconBase = 'http://picaflora.com/uniproject/images/';
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        icon: iconBase + markers[i][3]
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
setTimeout(initializeMaps, 5000);
}

If I alert() or console.log(), all the data is coming back from PHP just fine. But somehow it seems that the rest of the script just isn't doing anything with the variable markers. I'm not too familiar with javascript, just familiar enough to tinker and try things till it works, so if you think there might be a better way to approach the problem, then by all means go for it. I'd rather not look into jQuery solutions at this point, unless it's necessary. Thanks!

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Musa, Jul 04 '13 at 21:28

score 0 · Answer 1 · answered Jul 04 '13 at 21:31

Javascript is asynchronous unlike PHP. All of that javascript code where you do things with the markers is being executed immediately before you have received a response. What you need to do is wrap it in a function:

function myFunc(markers) {
     // all of your code to do stuff
}

Then call that function when the response state changes:

ajax.onreadystatechange=function()
{
  if (ajax.readyState==4 && ajax.status==200)
  {
      var markers = ajax.responseText;
      myFunc(markers);
  }
}

Killswitch · Accepted Answer · 2013-07-04T21:42:21.087

You have to decode the encoded JSON string at the javascript's end before you can use it as a variable.

Instead of

var markers = ajax.responseText;

use

var markers = JSON.parse(markers);

Try this-

setTimeout(initializeMaps, 5000);

function initializeMaps() {
    var markers;
    var ajax;
    ajax=new XMLHttpRequest();
    ajax.onreadystatechange=function(){
        if (ajax.readyState==4 && ajax.status==200){
            var markers = JSON.parse(ajax.responseText);
            update(markers);
        }
    }
    ajax.open("GET","ajax-getbubbles.php",true); 
    ajax.send();
}

function update(markers){
    var iconBase = 'http://picaflora.com/uniproject/images/';
    var infowindow = new google.maps.InfoWindow(), marker, i;
    for (i = 0; i < markers.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers[i][1], markers[i][2]),
            map: map,
            icon: iconBase + markers[i][3]
        });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent(markers[i][0]);
        infowindow.open(map, marker);
    }
    })(marker, i));
   }    
}

PS- I'm not sure why are calling setTimeout(initializeMaps, 5000); twice.

Trying to get json_encode array from PHP with AJAX into a Javascript function

2 Answers2