user1516322 user1516322 - 17 days ago 4
AngularJS Question

NodeJS + AngularJS $http get

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.

Answer

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);
    });
}
Comments