Variables in javascript while keeps resetting

Question

I have a while loop in this code:

while (i < 5)
{
var pos = new google.maps.LatLng(<?php echo json_encode($lat[$b]); ?>,<?php echo json_encode($lon[$b]);?>);
var marker = new MarkerWithLabel({
    position: pos,
    draggable: true,
    raiseOnDrag: true,
    map: map,
    icon: 'icon.png',
    labelContent: <?php echo json_encode($unidad[$b]); $b=$b+1;?>,
    labelAnchor: new google.maps.Point(22, 0),
    labelClass: "labels", // the CSS class for the label
    labelStyle: {opacity: 0.75},
    });
    google.maps.event.addListener(marker, "click", function (e) { iw1.open(map, this); });
    i++;
}

Now, let me explain the code and what is happening. First of all I am using JavaScript and PHP because I need some info from a db, and to add a map (Google Maps) I need to use javascript.

On the first round the value of $b pass from 0 to 1, but going through the first loop the value resets to 0 again. It's not like $b takes 0 by default, because if I declare $b=6 before the while loop then the values of $b will be always 6 and 7.

What am I doing wrong? Or how should I be doing this? Any help will be appreciated. Please excuse me for any mistakes since English is not my first language.

This is my new code, i just pass the array from php to javascript (i didn't know it was so easy) here is the new code:

var lat = <?php echo json_encode($lat)?>;
var lon = <?php echo json_encode($lon)?>;
var unidad = <?php echo json_encode($unidad)?>;

while (i < <?php echo json_encode($a)?>) 
{

var pos = new google.maps.LatLng(lat[i],lon[i]);
    var marker = new MarkerWithLabel({
       position: pos,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       icon: 'icon.png',
       labelContent: unidad[i],
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75},


     });

You are assuming that you are updating the value of `$b` for each iteration of the while loop, but you are not. Remember that PHP runs on the server side— so the value of `$b` is already set in stone when your client/user receives the file. You will have to store `$b` as a JS variable and increment it as such. — Terry, Aug 30 '15 at 18:43
Thank you, i didn't know this. As i am starting with php+javascript there are so many things i still don't know. As you can see i updated the code and now it runs flawlessly. — Oscar Montalvo, Aug 30 '15 at 20:27

score 2 · Accepted Answer · answered Aug 30 '15 at 17:50

2

You are hardcoding $lat[$b] the values from PHP to javascript literals. Resulting in something like this:

new google.maps.LatLng("lat of b",

You should encode the php variables as javascript variables instead of literals:

var lat = <?php echo json_encode($lat); ?>;
var b = <?php echo json_encode($b); ?>;
while(i<5) {
 ... actual code

That way from PHP you are creating a javascript variable instead of a literal.

Keep in mind that the page goes trough 2 stages.

server side rendering where the PHP code gets evaluated.
client side code where javascript evaluated.

You will most likely need to create a javascript variable for the $lat as well.

answered Aug 30 '15 at 17:50

toskv

30,680
7
72
74

Thank you so much for your reply, although your response wasn't exactly what i was looking for it gave me the chance to view it from another angle. So i just pass the array from php to javascript (i din't know it was so easy). I will paste my new code just in case someone else watch this. – Oscar Montalvo Aug 30 '15 at 18:22
well, it's not that you pass it to the javascript. using php you write/generate the javascript file, and you have to write/generate valid interpretable javascript code. – toskv Aug 30 '15 at 18:24
@OscarMontalvo you should easily see what the result is by checking the generated html in the browser. – toskv Aug 30 '15 at 18:26

Variables in javascript while keeps resetting

1 Answers1