Write to javascript array within php loop

Question

I have a php loop that is echoing out geolocation values. How can I get it to write those values to a javascript array, so I can then use them to plot points on an HTML5 canvas?

The php loop is as follows

<ul id = "geo-list">
    <?php foreach($data as $phrase) { ?>
        <li><?php
            if ($phrase->geo != false) {
                echo " | From (";
                echo $phrase->geo->coordinates[0];
                echo ",";
                echo $phrase->geo->coordinates[1];
                echo ")";
            } else {
                echo " | No Location Data";
            }
        ?>
        </li>
    <?php  } ?>
</ul>

Answer 1

You might want to take advantage of the JSON library for PHP.

Answer 2

The cleanest way to pass data to a browser's javascript program is to put it into a "hidden" html table.

The html should look something like

echo "\n<TABLE style='display: none;' id='DATTAB' >" ;
get_rows();
while ($cf = next_row()) {
    echo "\n <TR>";
    echo "\n<TD>" . $cf['KEY'] . "</TD>";
    echo "\n<TD>" . $cf['COL1'] . "</TD>";
    echo "\n<TD>" . $cf['COL2'] . "</TD>";
    echo " </TR>";
  }
  echo "\n</TABLE>";

This table is then easily accessable from your javascript:-

var dtab = document.getElementById("DATATAB");
var rows  = dtab.getElementsByTagName("tr"); 
for (var r = 0; r < rows.length ; r++) {
   row = rows[r];
   item_key  = row.cells[0].innerHTML;
   item_col1 = row.cells[1].innerHTML;
   item_col2 = row.cells[2].innerHTML;
   // do your thing here ......
}

Alternatively you could look at using the AJAX libraries like prototype or dojo which have the all javascript components for accessing data from a "REST" type service.

You then need to write a separate service which gets the XML or JSON required for your page.

Answer 3

My suggestion is to dump a script block to the output and set them in a variable there.

The array definition will have to actually be in the javascript code that gets output to the page.

e.g., you'll need an output of something like:

<script type="text/javascript">
    var coords = new Array(2);
    coords[0] = new Array(2);
    coords[0][0] = 123.45;
    coords[0][1] = 987.65;
    coords[1] = new Array(2);
    coords[1][0] = 234.56;
    coords[1][1] = 876.54;
</script>

There are more efficient ways to create this array statically, but this is just an example.

A more efficient way (in terms of code) would be to build up a string that defined the literal array, then dump out a javascript definition. The output would be something like:

<script type="text/javascript">
    var coords = [[123.45,987.65],[234.56,876.54]];
</script>

so in your loop within php, you'd build up a string which would ultimately contain var coords = [[123.45,987.65],[234.56,876.54]]. Outside your loop, you wrap it in the script blocks and output it to the page.

Answer 4

Did you try

var myJavascriptData = <?= json_encode($php_data) ?>;