Data not displaying in html file because of some angularjs issue

Question

I have to display some data from mongodb database using spring and angularjs. Data is being fetched to service.js method of angular js but its not displaying into html file as its not returning to controller.

UserNotification.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    <!--  <h2>Approve/Reject Pending Task</h2> -->
    <div class="row">
      <table class="table table-bordered">
        <thead>
            <tr>
            <th style="text-align: center;">Task name</th>
            <th style="text-align: center;">Owner name</th>
             <th style="text-align: center; width: 25px;">Approve</th>
            <th style="text-align: center; width: 25px;">Reject</th>
            </tr>
            </thead>
            <tbody>
                <tr ng-repeat="task in taskDetails">
                    <td>{{task.name}}</td>
                    <td>{{task.owners.ownerName.id}}</td>
                    <td  style="width:70px;text-align:center;"><button class="btn btn-mini btn-primary" ng-click="approveTask(taskDetails.indexOf(task), task)">Approve</button></td>
                    <td  style="width:70px;text-align:center;"><button class="btn btn-mini btn-danger" ng-click="rejectTask(taskDetails.indexOf(task), task)">Reject</button></td>
                </tr>

            </tbody>
      </table>
      </div>
    </body>
    </html>

controller.js

    releaseApp.controller('UserNotificationController', function($scope, $location, $http, UserNotificationService) {
        $scope.taskDetails = [];
        init();
        function init() {
            $scope.photos = UserNotificationService.getTask();
            console.log('inside controller: '+$scope.taskDetails);
        }
    });

service.js

    releaseApp.factory('UserNotificationService', function($http){
        var taskDetails = [];
        var factory = {};

        factory.getTask = function() {
             $http.get('userNotification/fetchTaskForApproval').success(function(data, status, headers, config) {
                photos = data;
                console.log('inside service method'+taskDetails);
                return taskDetails;
            });
        };
        return factory;
    });

// response i am getting in  chrome console :
//inside controller: undefined
//inside service method[object Object],[object Object]

I assume you've added ng-app and ng-controller in you html ... as well as referencing the js files ... — vidriduch, May 14 '15 at 14:04
JqueryKing : i did change in console.log('inside controller: '+$scope.photos); but its the same response i am getting. — Girish, May 14 '15 at 14:19
I am new to angularjs so please tell me how to push the taskdetails. I am stuck in this from last 1 week. — Girish, May 14 '15 at 14:20

Pankaj Parkar · Accepted Answer · 2015-06-06T08:18:01.330

1

You factory method should return $http promise using .then so that promise chain will continue in controller

    factory.getTask = function() {
         return $http.get('userNotification/fetchTaskForApproval').then(function(response) {
            //photos = response.data;
            taskDetails = response.data;
            console.log('inside service method'+taskDetails);
            return taskDetails;
        });
    };

Then your controller method would be

    function init() {
        UserNotificationService.getTask().then(function(data){
            //$scope.photos = data;
            $scope.taskDetails = data;
        });
        console.log('inside controller: '+$scope.taskDetails);
    }

edited Jun 06 '15 at 08:18

answered May 14 '15 at 14:10

Pankaj Parkar

134,766
23
234
299

Now i am getting this in console "inside controller: [object Object]" but still its not dispalying in html page. – Girish May 14 '15 at 14:35
@Girish could you tell me what `console.log('inside service method: ', taskDetails);` contains by doing this – Pankaj Parkar May 14 '15 at 14:40
Actually i am getting two object from mongodb so it contains "inside service method[object Object],[object Object]". like this : Object { id="550994e21cba9597624195aa", name="Deploy Renderer Code", team={...}, more...} this is one object. Like this there is one more object. So service method is returning two object – Girish May 14 '15 at 14:43
so you need to take look at it..and bind them properly eg. If you have object like `{id="550994e21cba9597624195aa", name="Deploy Renderer Code", taskDetails={...}, photos: {}, more...}` then you could do `$scope.taskDetails = data.taskDetails` & for photos it would be ``$scope.photos= data.photos`` – Pankaj Parkar May 14 '15 at 14:48
Where do i need to do this data binding? Please tell.. I am new to angularjs – Girish May 14 '15 at 14:51
inside `UserNotificationService.getTask().then(function(data){//$scope.photos = data;$scope.taskDetails = data;});` block of code – Pankaj Parkar May 14 '15 at 14:52
have you injected $scope on your controller – Pankaj Parkar May 14 '15 at 15:06
This is controller code : releaseApp.controller('UserNotificationController', function($scope, $location, $http, UserNotificationService) { $scope.taskDetails = []; init(); function init() { $scope.taskDetails = UserNotificationService.getTask(); console.log('inside controller: '+$scope.taskDetails); } }); – Girish May 15 '15 at 06:17
@Girish do the thing which I mentioned in answer..init function would be `function init() {UserNotificationService.getTask().then(function(data){//$scope.photos = data;$scope.taskDetails = data;});console.log('inside controller: '+$scope.taskDetails);}`..You can not inject controller inside factory – Pankaj Parkar May 15 '15 at 14:49

score 0 · Answer 2 · edited May 23 '17 at 10:26

for debugging purposes (e.g using console.log) :

the following concatenation will get interpreted as a string:
console.log('inside service method' + taskDetails);

try this to see if your object, taskDetails, is what you are expecting it to be:
console.log('inside service method: ', taskDetails);

EDIT: additionally, see this for general concatenation info Javascript console.log(object) vs. concatenating string

GL!

Data not displaying in html file because of some angularjs issue

2 Answers2