Retrieve javascript variable from mysql database

Question

this variable for locations is working fine in my code. http://vince.netau.net

var locations = [
  ["John Doe", "145 Rock Ridge Road, Chester, NY ", "41.314926,-74.270134", "http://maps.google.com/mapfiles/ms/icons/blue.png"],
  ["Jim Smith", "12 Williams Rd, Montvale, NJ ", "41.041599,-74.019554", "http://maps.google.com/mapfiles/ms/icons/green.png"],
  ["John Jones", "689 Fern St Township of Washington, NJ ", "40.997704,-74.050598", "http://maps.google.com/mapfiles/ms/icons/yellow.png"],
 ];

Now my next step is instead of static data like above, I would like to retrieve data from my mysql database and use it for var locations. I have this php which is spitting out the data from mysql in exactly the same format as above. http://vince.netau.net/db-connect-test.php

<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, name, address, lat, lng, Icon FROM markers";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
    echo '["'  . $row["name"]. '"'.    ', '. '"' . $row["address"].'"'.', '. '"'. $row["lat"].','. $row["lng"].'"'.', '. '"'. $row["Icon"]. '"]'. ','. "<br>";
    }
} else {
    echo "0 results";
}
$conn->close();
?> 

I just don't know how to make it work. Would appreciate any help on how to perform that. I am a beginner.

Thanks

Update-David, I tried the code you wrote. I'm still not sure what this does for me as far as getting the location data in the html?

<?php
    //open connection to mysql db
    $connection = mysqli_connect("","","","") or die("Error " . mysqli_error($connection));

    //fetch table rows from mysql db
    $sql = "select * from markers";
    $result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));

    $location = array();;
if ($result->num_rows > 0) {
// output data of each row
$key = 0;
while($row = $result->fetch_assoc()) {
$locations[$key][] = $row["name"];
$locations[$key][] = $row["address"];
$locations[$key][] = $row["lat"];
$locations[$key][] = $row["lng"];
$locations[$key][] = $row["Icon"];
$key++;
}
}
else {
echo "0 results";
}

echo json_encode($locations); 


    //close the db connection
    mysqli_close($connection);
?>

Here are the results, a little messed up.

[["John Doe","147 Rock Ridge Road, Chester, NY ","41.314926","-74.270134","http://maps.google.com/mapfiles/ms/icons/blue.png"],["Jim Smith","14 Williams Rd, Montvale, NJ ","41.041599","-74.019554","http://maps.google.com/mapfiles/ms/icons/green.png"],["John Jones","691 Fern St Township of Washington, NJ ","40.997704","-74.050598","http://maps.google.com/mapfiles/ms/icons/yellow.png"]]

Answer 1

On the server side, you should use json_encode to insert the data into the page.

eg

<?php
echo "<script> var data = '" + json_encode($locations) + "'; </script>";
?>

On the client side,

var locations = JSON.parse(data);

Answer 2

I see you are try to get location array ,so store as multidimentional array will be helpful

$location = array();;
if ($result->num_rows > 0) {
$key = 0;
// output data of each row
while($row = $result->fetch_assoc()) {
$locations[$key][] = $row["name"];
$locations[$key][] = $row["address"];
$locations[$key][] = $row["lat"];
$locations[$key][] = $row["lng"];
$locations[$key][] = $row["Icon"];
$key++;
}
}
else {
echo "0 results";
}
//echo json_encode($locations); 
<?php
echo "<script> var locations  = '" . json_encode($locations) . "'; </script>";
?>

Answer 3

So lets assume the php file is now giving me the exact location data that was formerly hard coded under var=locations in the html.

What is the new code I need to use in the html so that I call the php file and the hard coded data will be replaced with the php locations results which was pulled from the mysql table.

Thanks