Pass php string into Javascript array with httpRequest

Question

I am trying to fill a javascript array beaches3 from a php request dynamically with a httpRequest.

var jqxhr = $.get("http://127.0.0.1/websites/map_with_me.php?region="+region+"&suburb="+suburb+"&lat="+lat+"&lon="+lng, function() {
document.getElementById("thediv").innerHTML = (jqxhr.responseText);
var beaches3 = (jqxhr.responseText);
 })

The Output of map_with_me.php is

 [
     ['Bondi Beach', -33.890542, 151.274856, 4],
     ['Coogee Beach', -33.423036, 151.259052, 5],
     ['Cronulla Beach', -34.028249, 121.157507, 3],
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
     ['Maroubra Beach', -33.450198, 151.259302, 1]
];

So I want to fill the beaches3 var with the dynamic positions generated by the map_with_me.php file.

if I replace the whole $.get request with the static beaches variable it works.

How do I pass the dynamic javascript generated by the php file to the javascript array?

map_with_me.php

<?php 
echo "var beaches3 = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.423036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 121.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.450198, 151.259302, 1]
];"
?>

This works:

var jqxhr = $.get("http://127.0.0.1/websites/map_with_me.php?region="+region+"&suburb="+suburb+"&lat="+lat+"&lon="+lng, function() {
document.getElementById("thediv").innerHTML = (jqxhr.responseText);
var beaches3 = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.423036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 121.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.450198, 151.259302, 1]
    ];
 })

This Doesnt:

var jqxhr = $.get("http://127.0.0.1/websites/map_with_me.php?region="+region+"&suburb="+suburb+"&lat="+lat+"&lon="+lng, function() {
document.getElementById("thediv").innerHTML = (jqxhr.responseText);
var beaches3 = (jqxhr.responseText);
 })

Answer 1

If you're sure it's an array, an not json or something else, just doing:

$.get("/websites/map_with_me.php?region="+region+"&suburb="+suburb+"&lat="+lat+"&lon="+lng, function(data) {
    $("#thediv").html(data);
    var beaches3 = data;
});

should suffice.

Answer 2

have you tried:

var beaches3 =  JSON.parse(jqxhr.responseText);