Pass data from mysqli to javascript

Question

I want to pass the results of a query to javascript (I want to make an interactive quiz about fish species). This seems to be easy with json_encode, but the structure of my php array makes it difficult to access? Even console.log does not work, so there is probably an error, though I have been checking this code more than i would like to admit. I am pretty sure the error is in the small javascript part though. The code (this is all in a .php file):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<?php
$con = new mysqli("localhost", "root", "", "marinefish");
$query = "SELECT Commonname, Scientificname FROM allseafish";
$result = $con->query($query);
while ($row = $result->fetch_array()){
       $rows[] = $row;
}

/*
Structure rows:  
array(544) {
  [0]=>
  array(4) {
    [0]=>
    string(7) "Allfish"
    ["Commonname"]=>
    string(7) "Allfish"
    [1]=>
    string(11) "Omni pisces"
    ["Scientificname"]=>
    string(11) "Omni pisces"
  }
*/

mysqli_free_result($result);
mysqli_close($con);
?>

<title>Untitled</title>
</head>
<body>

<script type="text/javascript">
var ars = <?php echo json_encode($rows) ?>;
console.log(ars);
alert(ars[0][0]);
</script>
</body>
</html>

Any suggestions, or easy-to-understand links/ tutorials are very welcome! I tried: http://www.dyn-web.com/tutorials/php-js/json/multidim-arrays.php which seems very clearly explained, but couldn't help me. I also have tried to simplify the structure of the php array, but without success. And I tried to change the echo json_encode($rows) into print(json_encode($rows)). As you may have noticed, I am new with this, so all basic tips will be a great help. Thank you!

score 1 · Accepted Answer · edited May 23 '17 at 10:33

A better solution would be to separate your javascript from PHP through post/get requests by creating a new PHP page (e.g. Query.php) that is specific for Database response:

... MYSQL CODE ...
echo json_encode($rows); // Echo everything into body

And Using jQuery (or equivalent Ajax request):

$.ajax({
  type: "GET",
  url: 'query.php',
  dataType: "json",
  success: function(your_php_reponse_as_json){
      console.log(your_php_reponse_as_json);
  }
});

Note that this code will be essentially asynchronous as the request for the MYSQL Query is sent in another page using async JavaScript. Additionally you can customize your query reponse with $_POST & $_GET:

PHP Code:

$get1 = $_GET['js_sent'];
// Alternatively
$post1 = $_POST['js_sent'];

Edit: You'll need to serialized data before sending. For the complete jQuery solution refer here jQuery Ajax POST example with PHP

Thank you, separating the javascript from PHP made it work and also made the coding more clear. — EG Knoester, Nov 09 '15 at 12:30

score 0 · Answer 2 · answered Nov 07 '15 at 06:51

 $.post("checkproduct.php", {"useremail" : emailVal}, function(data) {

//use data returned from checkproduct.php.the value returned from checkemail.php is retrieved as data.

});

The above code post method to post variable to checkproduct.php here we are passing useremail and the value is emailVal and this is also a variable. and in checkproduct.php you need to echo/return your result. and resultant data can be use in the function as data

Pass data from mysqli to javascript

2 Answers2