Geek Answers Handbook

Writing a JSON array to an html page using javascript after receiving it from a PHP request

I have a MySQL query that I pass to a PHP array. The PHP array turns into a JSON array using json_encode . I am trying to do this for printing on my html page. Here is what I still have.

 <?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 read other similar questions in StackOverflow with no luck; my html page is completely empty. I tried to put json_econde(...) inside the javascript jsonArray variable instead of my PHP class. That didn't work either. I also have a var_dump 'd PHP array without any problems (all this is displayed on the page), and also put the array in a PHP variable using json_encode , and then echoed this array without any problems.

I do not know how to access this JSON array. I ultimately want it in a table, but since this is my first time bridging the gap between PHP and Javascript, I decided that I would take it one step at a time to know exactly what was going on.

+7
json javascript arrays php mysql
source share
2 answers

Try changing your function (don't use echo !, But return something):

 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();
+4
source share

The best way to get data from PHP to JavaScript is to use an asynchronous request (that is, "AJAX").

The javascript library greatly simplifies this process. Here is an 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 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>
+4
source share

More articles:


All Articles