I'll briefly explain what I am trying to do.
I have different entries on a mySql database, I want to load them from a PHP page, convert to JSON, and eventually read them back through AngularJS. So far I have manage to do all the steps but the last one. I'll go step by step so that other people can use this as a reference:
/// GRAB DATA FROM SQL DATABASE WITH PHP
access_db.php
<!DOCTYPE html>
<html>
<body>
<?php
$host = "myhost";
$user = "myusername";
$psw = "mypsw";
$dbname = "mydatabasename";
//open connection to mysql db
$conn = mysqli_connect($host,$user,$psw,$dbname); // Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT EntryName as name, EntryType as type, EntryPlatform as platform, EntryStatus as status, EntryDate as submitDate FROM 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 I run the php file, i get 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 with the database therefore seem to work correctly.
/// READ THE JSON WITH ANGULARJS (the problematic part)
for this of course I need both an HTML page as well as a 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 the code to make it 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 for 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 this is that nothing shows up on index.html.
EDIT: to be clearer, none of the AngularJS elements appear, which I guess means that it correctly tries to load data, but probably can't correctly parse it.
I believe the project is in the JS file, but at this point I tried so many different things that I am just confused. I hope someone can help me out understanding how to fix this situation, I hope I provided enough details.
Thanks!
$scope.getEntries();after the function – Spade Jul 1 '15 at 20:15