How to access array data from PHP in JavaScript

Question

I have this code in PHP. i works fine:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tsunami_simulation";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

//========================================================
 $sql='SELECT a.Household_Name, b.Latitude, b.Longitude FROM household a, location b WHERE a.Household_ID = b.Household_ID;';
 $result = mysqli_query($conn, $sql);
  
 if(mysqli_num_rows($result) > 0){
  
  for($i=0;$i<$num_rows;$i++){
   $row=mysql_fetch_row($result);

   $location[]= $row[0].', '.$row[2].', '.$row[1].','.($i+1);
   //echo "Household Name: " . $row[0]. " - Latitude: " . $row[1]. " - Longitude " . $row[2]. " " .($i+1)."<br>";
  }
  
 }else{echo "0 results";}
?>

now, what i want to do is access the array result from this PHP file in javascript. i tried using JSON.parse(). but i doesn't work. i used this piece of code: var locations = '<?php echo json_encode($location); ?>'; i does not give errors. followed by locations = JSON.parse(locations) and it returns <?php echo json_encode($location); ?> this and not the data. how can i get the proper data, any methods will do as long as it works, please help me. btw, i want to get the array from database in wamp and put markers on googlemap using the coordinates from the array. help me please!..

EDIT: There's is the other code where i have to access the data:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>New 1 -- Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?v3" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

<?php include 'Location.php';?>
  
  <script type="text/javascript">
    var locations = <?php echo json_encode($location, JSON_HEX_TAG); ?>;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(6.40, 125.60),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {

  loc_array = locations[i].split(",");

  marker = new google.maps.Marker({
   position: new google.maps.LatLng(loc_array[1], loc_array[2]),
   map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
   return function() {
    infowindow.setContent(loc_array[0]);
    infowindow.open(map, marker);
   }
  })(marker, i));
    }
  </script>
</body>
</html>

you can achieve this using `ajax` – Sam Teng Wong Feb 08 '16 at 03:58 — Sam Teng Wong, Feb 08 '16 at 03:58

Amadan · Answer 1 · 2016-02-08T04:06:59.133

0

$location[]= array($row[0], $row[2], $row[1], $i+1);

and then

var locations = <?php echo json_encode($location, JSON_HEX_TAG); ?>

Note: no JSON.parse needed, no quotes, and especially not manual concatenation of variables to form a quasi-array.

EDIT: JSON_HEX_TAG is highly recommended, if you have PHP 5.3.3+, as plain json_encode is not quite secure.

edited Feb 08 '16 at 04:06

answered Feb 08 '16 at 03:59

Amadan

191,408
23
240
301

i tried your code, sir. this way `
– New to Programming Feb 08 '16 at 04:17

How to access array data from PHP in JavaScript

1 Answers1