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
– vidriduch, Commented May 14, 2015 at 14:04
JqueryKing : i did change in console.log('inside controller: '+$scope.photos); but its the same response i am getting. — Girish
– Girish, Commented May 14, 2015 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
– Girish, Commented May 14, 2015 at 14:20

Pankaj Parkar · Accepted Answer · 2015-06-06 08:18:01Z

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 6, 2015 at 8:18

answered May 14, 2015 at 14:10

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Girish Over a year ago

Now i am getting this in console "inside controller: [object Object]" but still its not dispalying in html page.

Pankaj Parkar Over a year ago

@Girish could you tell me what console.log('inside service method: ', taskDetails); contains by doing this

Girish Over a year ago

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

Pankaj Parkar Over a year ago

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

Girish Over a year ago

Where do i need to do this data binding? Please tell.. I am new to angularjs

|

Community · Accepted Answer · 2017-05-23 10:26:49Z

0

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!

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered May 14, 2015 at 14:20

Shehryar Abbasi

3782 silver badges8 bronze badges

Collectives™ on Stack Overflow

Data not displaying in html file because of some angularjs issue

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related