PHP foreach in JavaScript

Question

I'm working with the following code (PHP within JavaScript). The foreach is working and it's echoing out the results when I check the console but the map script doesn't work.

var t = [];
var x = [];
var y = [];
var h = [];

<?php foreach($obj->data as $mapMarkers) {
    echo "t.push('" . json_encode($mapMarkers->AreaName . "');\n";
    echo "x.push(" . $mapMarkers->Longitude . ");\n";
    echo "y.push(" . $mapMarkers->Latitude . ");\n";
    echo "h.push('" . $mapMarkers->FullAddressBR . "');\n";
} ?>

var i = 0;
for ( item in t ) {
    var m = new google.maps.Marker({
        map:       google_map,
        animation: google.maps.Animation.DROP,
        title:     t[i],
        position:  new google.maps.LatLng(x[i],y[i]),
        html:      h[i]
    });

    google.maps.event.addListener(m, 'click', function() {
        info_window.setContent(this.html);
        info_window.open(google_map, this);
    });
    i++;
}

are you sure your variable `google_map` is defined correctly and usable within the scope? — pablito.aven, Nov 09 '15 at 14:57
So, you're using a variable as an index and a [`for(...in...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) loop - which is meant to iterate over the properties of an object - to build your own [`for(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) loop to iterate over the entries of an array? — Andreas, Nov 09 '15 at 14:59
Possible duplicate of [Pass a PHP string to a JavaScript variable (and escape newlines)](http://stackoverflow.com/questions/168214/pass-a-php-string-to-a-javascript-variable-and-escape-newlines) — Francesco Casula, Nov 09 '15 at 15:34
@FrancescoCasula I don't think it's a duplicate. The loop should provide the desired result, and OP does state that he has checked that it does. — harris, Nov 09 '15 at 15:42

Src · Answer 1 · 2015-11-09T15:17:23.753

3

Try this:

<?php foreach($obj->data as $mapMarkers) {?>
    t.push(<?echo "'" . json_encode($mapMarkers->AreaName . "'" ?>));
    x.push(<?echo "'" . $mapMarkers->Longitude . "'" ?>);
    y.push(<?echo "'" . $mapMarkers->Latitude . "'" ?>);
    h.push(<?echo "'" . $mapMarkers->FullAddressBR . "'" ?>);
<? } ?>

edited Nov 09 '15 at 15:17

answered Nov 09 '15 at 14:55

Src

5,252
5
28
56

This is much cleaner. – pablito.aven Nov 09 '15 at 14:57
`json_encode` is a PHP method. Also you're using the wrong concatenation operator. Cleaner though it may be, despite the errors, I doubt this is the source of the actual problem. – harris Nov 09 '15 at 15:15
@harris, My bad, sorry. Now it's correct – Src Nov 09 '15 at 15:18

Emmanuel Delay · Answer 2 · 2015-11-09T15:22:20.103

What you should do, is create 1 php object (well, let's put it in an array*); you echo the json_encode of that object; then javascript can directly read it.

The reason is so that you separate php from javascript.

So something like

<?php 
$my_array = array();
foreach($obj->data as $mapMarkers) {
  $my_array.push(array(
    't'=>$mapMarkers->AreaName,
    'x'=>$mapMarkers->Longitude,
    'y'=>$mapMarkers->Latitude,
    'h'=>$mapMarkers->FullAddressBR
  ));
}
echo 'var my_data = ' . json_encode($my_array) .';';
?>

Now you can use the it like this:

for (i in my_data) { // notice: this is how you use for/in.  The i becomes the index, not the item itself
var m = new google.maps.Marker({
    map:       google_map,
    animation: google.maps.Animation.DROP,
    title:     my_data[i].t,
    position:  new google.maps.LatLng(my_data[i].x, my_data[i].y),
    html:      my_data[i].h
});

(* php doesn't know what an array really should be. Most php arrays are really objects)

score 0 · Accepted Answer · answered Nov 09 '15 at 15:58

0

Solved it! My original code was working fine, I just had the long and lat the wrong way round. My bad!

answered Nov 09 '15 at 15:58

James George Dunn

523
1
6
16

PHP foreach in JavaScript

3 Answers3