NodeJS + AngularJS $http get - angularjs

Question

I am using Nodejs and AngularJS and i am having a problem with filling a table in the front-end from a generated JSON file.
I have the below ejs file:
<% include layout %>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class= "panel-title"> <%=title %></h3>
</div>
<br>
<div
data-ng-app="projectionsModule"
data-ng-controller="projectionsController">
<div class="container">
<%include projectionsGrid%>
</div>
</div>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="../../javascripts/app/projections/projectionsModule.js"> </script>
<script src="../../javascripts/app/projections/projectionsService.js"></script>
<script src="../../javascripts/app/projections/projectionsController.js"></script>
and the projectionsGrid.ejs as of below:
<table
data-ng-show="projections.length > 0"
class='table table-striped table-hover'
>
<tr class="success">
<td>Name</td>
<td>Age</td>
</tr>
<tr data-ng-repeat="projection in projections">
<td>{{projection.Name}}</td>
<td>{{projection.Age}}</td>
</tr>
</table>
The controller is the following:
angular.module("projectionsModule")
.controller("projectionsController", projectionsController);
projectionsController.$inject = ['$scope', 'projectionsService'];
function projectionsController($scope, projectionsService) {
// $scope.projections = [];
getAllProjections();
function getAllProjections() {
projectionsService.getAllProjections().
success(function (response) {
$scope.projections = response.projections;
alert(response.projections);
// console.log(response.projections[0]);
})
}
}
and the Service :
angular.module("projectionsModule")
.factory("projectionsService", projectionsService);
projectionsService.$inject = ['$http'];
function projectionsService($http) {
return {
getAllProjections : function () {
return $http.get('/getAllProjections');
}
};
}
It seems that the
projectionsService.getAllProjections().
success(function (response) {
$scope.projections = response.projections;
does not work.
In the browser with Inspect all files are loaded correctly.
The json file is the below:
{
"projections": [
{
"name": "Alex",
"age": "18"
}
]
}
The printscreen i get when i run it:
enter image description here
Could someone please help mew cause i really do not know what else to do.
Thank you.
Print screen with error:
enter image description here

Answer 1

Please see related plunker.
You are using promises wrong. If you need explanation, ask me in a comment.
// Mandatory code for plunkr link
In your case, instead of returning an object, just make a $http call and delete the timeout. I'll let you do it, but if you need help, feel free to ask.
EDIT AFTER COMMENT you forgot to include $http as a dependency. You can also use $http.get, which is faster and (for me at least) easier to understand (see the documentation here)
angular.module("projectionsModule")
.factory("projectionsService", function($q, $http) {
return {
projectionFunction: projectionFunction
}
function projectionFunction() {
return $http.get('127.0.0.1:1337/getAllProjections', {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
});
EDIT WITH SOLUTION You need to use $q to use promises. Take a look into it, you will use it very often with your http requests. Your function should look like this :
angular.module("projectionsModule")
.factory("projectionsService", function($q, $http) {
return {
projectionFunction: projectionFunction
}
function projectionFunction() {
var defer = $q.defer();
$http.get('127.0.0.1:1337/getAllProjections', {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(success) {
defer.resolve(success);
}, function(error) {
defer.reject(error);
});
return defer.promise;
}
});
In your controller, you can then do something like that :
function getAllProjections() {
projectionsService.projectionFunction().then(function(success) {
$scope.projections = success.data.projections;
// do an alert(success) to see what is in it !
}, function(error) {
alert(error.data);
});
}