Menu
I have a MySQL query that I pass to a PHP array. The PHP array is turned into a JSON array using json_encode. I am trying to then get this to print onto my html page. Here is what I have so far.
<?php
class db {
public $conn;
function dbLogin() {
$this->conn = new mysqli("1.2.3.4","user","pwd","db");
}
public function selectQuery() {
$this->dbLogin();
$query = "
SELECT *
FROM tekken_7_frame_data
";
echo "<pre>";
$resultArray = Array();
if ($result = $this->conn->query($query)) {
while ($row = $result->fetch_array()) {
$resultArray[] = $row;
}
}
echo "</pre>";
$resultJson = json_encode($resultArray);
}
}
$fData = new db();
$fData->selectQuery();
?>
<html>
<head>
</head>
<body>
<script>
var jsonArray = <?php echo $resultJson ?>;
document.write(jsonArray);
for (i = 0; i < jsonArray.length; i++) {
document.write(jsonArray[i][1]);
}
</script>
</body>
</html>
I've read up on other similar questions on StackOverflow with no luck; my html page is completely blank. I've tried placing json_econde(...) inside of the javascript variable jsonArray instead of in my PHP class. That didn't work either. I have also var_dump'd the PHP array with no issue (the whole thing displayed on the page), as well as placed the array in a PHP variable using json_encode, then echoed that array with no issue.
I have no idea how to access this JSON array. I ultimately want it in a table, but because this is my first time bridging the gap between PHP and Javascript, I figured that I would take it one step at a time so that I know exactly what is going on.
225
Try to change your function (don't use echo! but return something) to:
public function selectQuery() {
$this->dbLogin();
$query = "
SELECT *
FROM tekken_7_frame_data
";
$resultArray = Array();
if ($result = $this->conn->query($query)) {
while ($row = $result->fetch_array()) {
$resultArray[] = $row;
}
}
return json_encode($resultArray);
}
and downthere:
$fData = new db();
$resultJson = $fData->selectQuery();
The best way to get data from PHP into JavaScript is to use an asynchronous request (that is, "AJAX").
A javascript library greatly simplifies this process. Here's a rough example using AngularJS (http://angularjs.org).
json.php
// this file JUST needs to print JSON as string.
<?php
class db {
public $conn;
function dbLogin() {
$this->conn = new mysqli("1.2.3.4","user","pwd","db");
}
public function selectQuery() {
$this->dbLogin();
$query = "
SELECT *
FROM tekken_7_frame_data
";
$resultArray = Array();
if ($result = $this->conn->query($query)) {
while ($row = $result->fetch_array()) {
$resultArray[] = $row;
}
}
return json_encode($resultArray);
}
}
$fData = new db();
print $fData->selectQuery();
?>
myscript.js
// this will fetch your JSON string from the PHP file and
// set $scope.myData to a JS object.
// it sets $scope.myDataString to a JSON stringified format.
angular.module('myApp' [])
.controller('myController', function($http, $scope) {
var $scope.myData = {};
var $scope.myDataString = '';
function getMyData () {
$http.get('/json.php')
.success( function (data) {
$scope.myData = data;
$scope.myDataString = JSON.stringify(data);
})
.error(function (err) {
$scope.myData = {error: err};
$scope.myDataString = "ERROR: "+JSON.stringify(data);
})
}
getMyData();
}
mypage.html
<!-- include angular and your app's file.
make sure to link in your app and controller -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='myscript.js'>
</head>
<body ng-app='myApp'>
<main ng-controller='myController as myCtrl'>
<div id='myOutput'>{{myDataString}}</div>
</main>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With