array to js function from sql row

Question

i have an sql with 2 columns, latitude and longitude.

I am able to print out the entries of these two columns like:

$result = mysqli_query($con,"SELECT * FROM events");
while ($row = mysqli_fetch_array($result)) {
 echo $row['latitude'];
 echo $row['longitude'];
}

I also have a JS function, where i need a while to add as many JS lines as the sql query returns. Here is the JS:

var myMarkers = {"markers": [
{"latitude": "47.47256859162068", "longitude":"19.055979251861572", "icon": "marker.png", "baloon_text": 'This is <strong>Budapest</strong>'},
]
};

So i'd need something like: "latitude": $latitude[i] and "longitude": $longitude[i] all these in a for or a while

Is there a way that i could pass the content of the two sql rows to a js function, to be able to get all the line with the correct values?

• Johan: JSON encode it on the server and parse it on the client
• Steve: Where does the value for ballon_text come from? Is it in the same database as lat long?

Answer 1

An example of what to do can be seen here.

Convert the data into JSON.

$markers = array();
while ($row = mysqli_fetch_array($result)) {
 $markers[] = array(
 'longitude' => $row['longitude'],
 'latitude' => $row['latitude']
 );
}
$markersJson = json_encode($markers);

Then pass it to your JS:

<script type="text/javascript">
 var obj = JSON.parse('<?= $markersJson ; ?>');
 console.log(obj);
</script>

Check your console to view the structure of the data.

• Vivek Pratap Singh: Why there is need to create an empty array $markers when things can be done without creating it ?
• user399666: @Vivek Readability. Also allows me to narrow down the amount of columns if I need to.
• user399666: @Vivek Updated my answer to show you what I meant. My first approach was a tad bit "lazy". :)
• Steve: is JSON.parse needed when printing an object declaration? Either way, ballon_text data needs to be included, though OP has not said where this data comes from

Answer 2

Convert the result of mysql data array into JSON.

$result_json = json_encode($result);

And parse this variable in jQuery fashion to access all values.

<script type="text/javascript">
 var obj= $.parseJSON('<?= $result_json; ?>'); //Parse the above encoded Json.
 //Here is how you iterate
 var json = $.parseJSON(obj);
 $(json).each(function(i,val){
 console.log(val);
 });
</script>

Answer 3

you can use something like this:

<script>
var myMarkers = {"markers": [
<?php
$result = mysqli_query($con,"SELECT * FROM events");
while ($row = mysqli_fetch_array($result)) {?>
 {"latitude": "<?php echo $row['latitude'];?>", "longitude":"<?php echo $row['longitude'];?>", "icon": "marker.png", "baloon_text": 'This is <strong>Budapest</strong>'},
<?php
}
?>
]
};
</script>

PHP is a server side language so it gets executed before javascript which is a client side language, the trick is to use :

"latitude": <?php echo $latitude[i];?>

Answer 4

you can try

<script>
<?php
$result = mysqli_query($con,"SELECT * FROM events");
$i=0;
while ($row = mysqli_fetch_array($result)) 
{ 
?>
var myMarkers[<?php echo $i;?>] = {"markers": [{"latitude": "<?php echo $row['latitude'];?>", "longitude":"<?php echo $row['longitude'];?>", "icon": "marker.png", "baloon_text": 'This is <strong>Budapest</strong>'},]};
<?php
 $i+=1;
}
?>
</script>

Answer 5

Fetch your data through the SQL query and put the output in a single array via your loop. Use json_encode() to serialise the array into a transportable form, pass it to JavaScript, for example by an XMLHttpRequest and parse it in JS with the internal JSON.parse().