Populate JavaScript variables with PHP values

Question

This map.php page displays a table containing mongoDB documents which contain a time, latitude and longitude for coordinate readings.

It also uses the google API to show a location on a map (hardwired). I want to replace the lat/long being read by the google map script with the latitude/longitude of the table entry with the largest 'Time' value (aka the latest entry). I understand that you can write php echo statements straight into to get the values but as you can see I have a loop to get the table entries, is it realistic to do what I want here? PHP learner, absolute mongodb and javascript novice here. Thanks for any help!

EDIT: SOLVED, edited to working solution as per selected answer. thanks all.

   <!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>Last Locations</h3>

    <?php
    //name of DB: muntean Name of collection:TestData
    $user = "muntean";
    require '/var/composer/vendor/autoload.php';
    $manager = new MongoDB\Driver\Manager("mongodb://localhost:27017");
    $collection = new MongoDB\Collection($manager, $user, 'testData');

    $data  = "<table style='border:1px solid red;";
    $data .= "border-collapse:collapse' border='1px'>";
    $data .= "<thead>";
    $data .= "<tr>";
    $data .= "<th>Time</th>";
    $data .= "<th>Longitude</th>";
    $data .= "<th>Latitude</th>";
    $data .= "</tr>";
    $data .= "</thead>";
    $data .= "<tbody>";

   try{
    $cursor = $collection->find();
    $largest =  0;
   foreach($cursor as $document){
   if ($largest < $document["Time"]) {
       $largest = $document["Time"];
       $longitude = $document["Longitude"];
       $latitude = $document["Latitude"];
   }

   $data .= "<tr>";
   $data .= "<td>" . $document["Time"] . "</td>";
   $data .= "<td>" . $document["Longitude"]."</td>";
   $data .= "<td>" . $document["Latitude"]."</td>";
   $data .= "</tr>";
  }
  $data .= "</tbody>";
  $data .= "</table>";
  echo $data;
  }catch(MongoException $mongoException){
    print $mongoException;
    exit;
}


     ?>

    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of point
   var point = {lat: <?php echo $latitude; ?>, lng: <?php echo $longitude; ?>}
  // The map, centered at point
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 12, center: point});
  // The marker, positioned at point
  var marker = new google.maps.Marker({position: point, map: map});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6CMFIF-m8Z_kNLUGT7HEVBew_wPLno7o&callback=initMap">
    </script>

  </body>
</html>

Locations random

Is that what you're looking for ? var my_var = <?php echo json_encode($my_var); ?>; — samb102
– samb102, Commented Mar 6, 2019 at 9:07
That is the format (json encoding is not always necessary as I understand?) but there is no specific 'my_var' to target that I can see. If I want to isolate the longitude for example would it be "var longitude = <?php echo json_encode($document["Longitude"]; ?>; ? That can't be fully right actually since that will change and is written for the find(). — Jay.F
– Jay.F, Commented Mar 6, 2019 at 9:12

rudak · Accepted Answer · 2019-03-06 09:14:31Z

2

you just have to encode your variables in Json in PHP to get a string with JS. then you decode the Json and you will have your variables in a nice JS object

<script>
let json= "<?php echo json_encode($variables); ?>";
let obj = JSON.parse(json);
</script>

answered Mar 6, 2019 at 9:14

rudak

3991 gold badge3 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

R3tep · Accepted Answer · 2019-03-06 11:43:31Z

1

Into the PHP loop you can save the Longitude and Latitude with the largest time value, like :

$largest =  0;
foreach($cursor as $document){
   if ($largest < $document["Time"]) {
       $largest = $document["Time"];
       $longitude = $document["Longitude"];
       $latitude = $document["Latitude"];
   }

   $data .= "<tr>";
   $data .= "<td>" . $document["Time"] . "</td>";
   $data .= "<td>" . $document["Longitude"]."</td>";
   $data .= "<td>" . $document["Latitude"]."</td>";
   data .= "</tr>";
}

After you can echo $longitude and $latitude into your javascript

var point = {lat: <?php echo $latitude; ?>, lng: <?php echo $longitude; ?>}

edited Mar 6, 2019 at 11:43

answered Mar 6, 2019 at 9:14

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

4 Comments

Jay.F Over a year ago

><td>1551849760</td><td>-6.602801322937</td><td>53.3740234375</td></tr><tr><td>1 551854433</td><td>-6.6027488708496</td><td>53.374073028564</td></tr></tbody></ta ble>

Jay.F Over a year ago

PHP Fatal error: Uncaught exception 'MongoDB\Driver\Exception\LogicExceptio n' with message 'Cursors cannot yield multiple iterators' in /home/muntean/www/m ap.php:52 Stack trace: #0 /home/muntean/www/map.php(52): unknown() #1 {main} thrown in /home/muntean/www/map.php on line 52

Jay.F Over a year ago

I think i already tried putting it in a try/catch maybe it just needs to be declared.

R3tep Over a year ago

Put the if statement into your loop and don't create another loop.

blex · Accepted Answer · 2019-03-06 16:02:32Z

1

There are two steps here :

Get the document with the latest data
Insert the values into your JS

For the first one, you can take advantage of the loop you already have if performance is an issue (thousands of time frames), but for cleaner code, I would suggest declaring a dedicated function in your PHP:

/**
 * Returns the latest data in a collection, or false if none exists
 */
function getLatestData($collection) {
  $cursor = $collection->find();
  $result = null;
  foreach ($cursor as $document) {
    // If it's the first iteration or if this doc is newer
    if ($result === null || $document['Time'] > $result['Time']) {
      $result = $document;
    }
  }
  if ($result !== null) {
    return ['lat' => $result['Latitude'], 'lng' => $result['Longitude']];
  }
  return false;
}

Then, inside your JS, you can use json_encode to convert your result into a JSON string:

var point = <?=json_encode(getLatestData($collection))?>;

edited Mar 6, 2019 at 16:02

answered Mar 6, 2019 at 9:17

blex

25.7k6 gold badges48 silver badges78 bronze badges

4 Comments

Jay.F Over a year ago

Thank you. var point = <?=json_encode(getLatestData($collection))?>; is being read as "var point = true". Is this meant to be complete code?

Jay.F Over a year ago

<tbody><tr ><td>1551849760</td><td>-6.602801322937</td><td>53.3740234375</td></tr><tr><td>1 551854433</td><td>-6.6027488708496</td><td>53.374073028564</td></tr></tbody><

Jay.F Over a year ago

p.s I assume it's supposed to be "$result = $document;"? rather than "$result = document;"?

blex Over a year ago

Sorry, I write JS every day, and messed up while writing this PHP piece. I fixed it. I see you've found another answer, though ;-)

Collectives™ on Stack Overflow

Populate JavaScript variables with PHP values

3 Answers 3

Comments

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest