The following code should fetch data from a MySQL Database with a $http-service but somehow the data, which the service provides doesn´t go to the controller/gets displayed wrong :/. If I start my application a empty or wrong table gets displayed at my page.
I provided some sampledata in the getUsers() function. The PHP code, which provides the data is working and this is a example of the JSON the PHP returns.
Maybe you guys can help me out to fix this up.
var app = angular.module('DBapp', []);
app.controller('MainCtrl', function($scope, $http, DatabaseService) {
$scope.userData = DatabaseService.getUsers();
});
app.factory('DatabaseService', function($http) {
var srv = {};
//Service Implementation
srv.getUsers = function() {
return [{"user_id":"1","firstname":"Barrack","lastname":"Obama","email":"obama@web.de"}, {"user_id":"2","firstname":"Tom","lastname":"Hanks","email":"tommy@web.de"},{"user_id":"6","firstname":"Felix","lastname":"Blume","email":"felix.b@selfmade.de"}];
};
//I provided some dummy-data in the getUsers-function as example output from the DB
//Public API
return {
getUsers: function() {
return srv.getUsers();
}
};
});<!DOCTYPE html>
<html ng-app="DBapp">
<head>
<meta charset="ISO-8859-1">
<title>DB Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div>
<div>
<div class="page-header">
<h1>Overview Database</h1>
</div>
<table style="font-size:20px; margin-left:10px;" class="table table-hover"">
<thead><tr><th>ID</th><th>Firstname</th><th>Secondname</th><th>Email</th></tr></thead>
<tbody>
<tr ng-repeat="user in userData">
<td ng-bind="user.user_id"></td>
<td ng-bind="user.firstname"></td>
<td ng-bind="user.lastname"></td>
<td ng-bind="user.email"></td>
<td>
<a ng-href="#/database/{{ user.user_id }}/edit"><button type="button" class="btn btn-info"><span class="glyphicon glyphicon-wrench"></span> Edit</button></a>
</td>
<td> <a ng-href="#/database/{{ user.user_id }}/delete"><button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</button></a></td>
</tr>
</tbody>
</table>
<add-user-form></add-user-form>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src=lib/jquery/jquery-1.10.2.min.js></script>
<script src=lib/angular/angular.js></script>
<script src=lib/angular-route/angular-route.js></script>
<script src=scripts/app.js></script>
<script src=scripts/services/db_service.js></script>
<script src=scripts/controllers/main_controller.js></script>
<script src=scripts/directive/addUser_form.js></script>
<script src=scripts/controllers/delete_controller.js></script>
<script src=scripts/controllers/edit_controller.js></script>
</body>
</html>As you can see above, it works with the dummy data. But if I change my service to the following code (with the actual $http-request) nothing works...
So the question is:
How do I pass my data from the http request to the $scope in the MainCtrl ?
app.factory('DatabaseService', function($http) {
var srv = {};
//Service Implementation
srv.getUsers = function() {
$http.post("php/getData.php").success(function(data) {
return data;
});
};
//Public API
return {
getUsers: function() {
return srv.getUsers();
}
};
});`
</div>
