php generated array in javascript function

Question

I'm trying to plot some cities on Google's Geochart. This function works perfectly fine and will plot cities.

function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
   ['City'],
   ['San Diego'],
   ['Los Angeles'],
   ['San Jose']
  ]);

While that's nice and all, I'm generating my cities from my database via php. So, let's just say we have this php array

<?php $city = array("San Diego", "Los Angeles", "San Jose"); ?>

Now here comes the part where I'm struggling. I can't seem to get a loop working properly so that I can output each city separately.

When I do this only the first city in the array(San Diego) will display and I understand why...I'm just showing that this method will at least print "something"

function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
    ['City'],
    ['<?php foreach($city as $location){ echo json_encode($location); } ?>']
]);
//options here
}

So, I'm attempting to loop through and print each item in the array using javascript but I don't seem to have the logic correct

function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
    ['City'],
    for(i=0;i<json_encode($city).count;i++){
     //some kind of print statement mixing php and javascript. I need help here please!
     }
]);

Here's the entire page

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<?
$city = array("San Jose","Los Angeles","San Diego");
foreach($city as $key=>$value) {
     echo "$value";
}  
?>
<script type="text/javascript">
 google.load('visualization', '1.1', {packages: ['geochart']});


function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
    ['City'],
['<?php echo json_encode($city);  ?>']
]);

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

chart.draw(newInfo, {width: 556, height: 347, displayMode: 'markers', region: 'US-CA', resolution: 'provinces'});
}


google.setOnLoadCallback(drawMarkersMap);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="chart_div"></div>
</body>
</html>

You need to post what json_encode() actually outputs, not just the function in place. Your JSON is likely malformed, or not an array, but an object, which Google's functions might vomit over. — Bojangles
– Bojangles, Commented May 18, 2012 at 1:15
I'm not quite sure I understand what you mean. Can you please give me an example or modify what I have? — user1104854
– user1104854, Commented May 18, 2012 at 1:18
At the moment, all you've given is <?php echo json_encode($city); ?>, which is useless because it's impossible to know if the string that json_encode() outputs is properly formed for the JS you plug it into. Instead of posting the PHP, please post the JSON string it outputs to the browser. — Bojangles
– Bojangles, Commented May 18, 2012 at 1:21

deceze · Accepted Answer · 2012-05-18 01:24:48Z

2

<?php $city = array(array('City'), array('San Diego'), array('Los Angeles'), array('San Jose')); ?>

var newInfo = google.visualization.arrayToDataTable(<?php echo json_encode($city); ?>);

This recreates exactly the same array structure as your original script.

answered May 18, 2012 at 1:24

deceze♦

524k88 gold badges804 silver badges951 bronze badges

Thanks, worked perfectly. I now see what @JamWaffles was talking about with my array set up improperly.

user1104854
– user1104854

05/18/2012 01:28:35
Commented May 18, 2012 at 1:28

Add a comment |

inhan · Accepted Answer · 2012-05-18 02:14:19Z

1

Why don't you use the implode function?

<script type="text/javascript">
<?php $city = array("San Diego", "Los Angeles", "San Jose"); ?>
    function drawMarkersMap() {
        var newInfo = google.visualization.arrayToDataTable([
        ['City'],
        ['<?php echo implode("'],\n\t\t['",$city) ?>']
        ]);
    }
</script>

which will result in

<script type="text/javascript">
    function drawMarkersMap() {
        var newInfo = google.visualization.arrayToDataTable([
        ['City'],
        ['San Diego'],
        ['Los Angeles'],
        ['San Jose']]);
    }
</script>

As per request…

<script type="text/javascript">
<?php $city = array("San Diego", "Los Angeles", "San Jose"); ?>
    function drawMarkersMap() {
        var newInfo = google.visualization.arrayToDataTable([
        ['City'],
        ['<?php foreach($city as &$c)$c=htmlspecialchars($c,ENT_QUOTES,'UTF-8'); echo implode("'],\n\t\t['",$city); ?>']
        ]);
    }
</script>

..although I should agree with the fact that using JSON is much practical :)

edited May 18, 2012 at 2:14

answered May 18, 2012 at 1:36

inhan

7,5002 gold badges26 silver badges35 bronze badges

That works, until your values contain quotes or slashes... Let json_encode handle it.

deceze
– deceze ♦

05/18/2012 01:56:05
Commented May 18, 2012 at 1:56
@deceze I added an alternative to my post but I agree.

inhan
– inhan

05/18/2012 02:15:33
Commented May 18, 2012 at 2:15
htmlspecialchars does not necessarily help when you're trying to escape JSON syntax.

deceze
– deceze ♦

05/18/2012 02:29:16
Commented May 18, 2012 at 2:29
Maybe not, but you are trying to cobble together valid JSON/Javascript code, which means you need to escape for JSON/Javascript syntax, not HTML.

deceze
– deceze ♦

05/18/2012 03:20:29
Commented May 18, 2012 at 3:20

Add a comment |

Collectives™ on Stack Overflow

php generated array in javascript function

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related