javascript - Read JSON data with AngularJS from PHP connecting to SQL -
i'll briefly explain trying do.
i have different entries on mysql database, want load them php page, convert json, , read them through angularjs. far have manage steps last one. i'll go step step other people can use reference:
/// grab data sql database php
access_db.php
<!doctype html> <html> <body> <?php $host = "myhost"; $user = "myusername"; $psw = "mypsw"; $dbname = "mydatabasename"; //open connection mysql db $conn = mysqli_connect($host,$user,$psw,$dbname); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } $sql = "select entryname name, entrytype type, entryplatform platform, entrystatus status, entrydate submitdate pl_entries"; $result = $conn->query($sql); $rows = array(); if ($result->num_rows > 0){ while($r = $result->fetch_assoc()){ $rows[] = $r; } echo json_encode($rows); } else { echo "0 results"; } mysqli_close($conn); ?> </body> </html> if run php file, this:
[{"name":"name1","type":"type1","platform":"platform1","status":"status1","submitdate":"date1"},{"name":"name2","type":"type2","platform":"platform2","status":"status2","submitdate":"date2"},{"name":"name3","type":"type3","platform":"platform3","status":"status3","submitdate":"date3"},{"name":"name4","type":"type4","platform":"platform4","status":"status4","submitdate":"date4"}]
the connection database therefore seem work correctly.
/// read json angularjs (the problematic part)
for of course need both html page js file.
dbservice.js
var app = angular.module('dbapp', []); function getentries($scope, $http){ $http.get('/php/access_db.php').success(function(data) { $scope.entries = data; }); } index.html (i removed part of code make more readable)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- angularjs --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script src="js/dbservice.js"></script> </head> <body ng-app="dbapp"> <div class="main" ng-controller="getentries"> <div class="container"> <!-- entries list --> <div id="diary"> <div ng-repeat="entry in entries | orderby: '-date'"> <div class="row"> <h1>{{ entry.submitdate | date: 'dd' }}</h1> <p>{{ entry.submitdate | date: 'mmm'}}, {{ entry.submitdate | date: 'yyyy'}}</p> <p>{{ entry.type }}</p> <h1>{{ entry.name }}</h1> <p>{{ entry.platform }}</p> <p>{{ entry.status }}</p> </div> </div> </div> </div> </div> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </body> </html> the result of nothing shows on index.html.
edit: clearer, none of angularjs elements appear, guess means correctly tries load data, can't correctly parse it.
i believe project in js file, @ point tried many different things confused. hope can me out understanding how fix situation, hope provided enough details.
thanks!
there few possible reasons why facing problem. try make sure controller working first. check console see initiating or not.
i think confused between controller , service. saw injected getservices meant services not controller
var myapp = angular.module('dbapp',[]); myapp.controller('getentries', ['$scope', '$http', function($scope,$http) { console.log("initiating controller"); $http.get('/php/access_db.php').success(function(data) { $scope.entries = data; }); }]); here simple app $http.get usage. use random api should work php server. http://plnkr.co/edit/zzprkg8yokh1jxtzrmdr
this not practice. try move http request services instead of controller.
Comments
Post a Comment