AngularJS Data from a Service

Question

So I have created a Notifications service in AngularJS and well I'm not getting any meaning full data back in my $scope.Notifications variable.

I can see the service is being called and running at the correct interval, and the correct data is being returned from the API:

[{"id":1,"user_id":1,"content":"You have new mail: Test","read":null,"type":"mail","deleted_at":null,"created_at":"2015-06-23 20:16:38","updated_at":"2015-06-23 20:16:38"},{"id":2,"user_id":1,"content":"You have new mail: Test","read":null,"type":"mail","deleted_at":null,"created_at":"2015-06-23 20:16:38","updated_at":"2015-06-23 20:16:38"},{"id":3,"user_id":1,"content":"You have new mail: Test","read":null,"type":"mail","deleted_at":null,"created_at":"2015-06-23 20:16:38","updated_at":"2015-06-23 20:16:38"}]

Essentially, all I need from this is a simple array of the users notifications.

Here is my service:

app.services.Notifications = ['$http', '$timeout', function($http, $timeout){

    var timeoutId;
    var notificationService = this;

    function checkForNotifications(){
      console.log('checking')
      return $http.get('/api/notifications')
        .then(function(res){
              return res.data.filter(function(notification){
                  return notification.unread === true;
              })
        })
        .then(function(unreadNotifications){
          //fake for effect
          notificationService.count = Math.floor(Math.random() * (100 - 1)) + 1;
          //notificationService.count = unreadNotifications.length;
        })
        .then(waitAndCheck)
    }

    function waitAndCheck(){
      return $timeout(function(){
        checkForNotifications()
      },5000);
    }

    return {
        Notifications: waitAndCheck()
    }
}];

And my controller:

app.controllers.notificationsController = ['$scope', 'Notifications', function($scope, Notifications) {
    $scope.Notifications = Notifications;
}];

If I console log $scope.Notifications in the controller I being return this:

Object {Notifications: d}Notifications: d$$state: Objectstatus: 1value: undefined__proto__: Object$$timeoutId: 1__proto__: Object__proto__: Object

Your "service" returns an object with the key Notifications — Betty St
– Betty St, Commented Jun 24, 2015 at 20:12

KreepN · Accepted Answer · 2015-06-24 20:18:37Z

2

Set your $scope.Notifications = Notifications.Notifications;

app.controllers.notificationsController = ['$scope', 'Notifications', function($scope, Notifications) {
    $scope.Notifications = Notifications.Notifications;
}];

edited Jun 24, 2015 at 20:18

KreepN

8,5981 gold badge43 silver badges58 bronze badges

answered Jun 24, 2015 at 20:11

br0tat0

5393 silver badges8 bronze badges

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

Comments

Pankaj Parkar · Accepted Answer · 2015-06-24 20:16:40Z

0

Currently the thing which you are getting in console is nothing but a promise object which is conceptually correct. If you want the data from it then you use resolve that promise chain using .then function on Notification service.

Notifications.Notifications.then(function(data){
   $scope.Notifications = data;
})

edited Jun 24, 2015 at 20:16

answered Jun 24, 2015 at 20:12

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

8 Comments

ChrisBratherton Over a year ago

Tried that, and now I get the following error in my console: TypeError: Notifications.then is not a function

Pankaj Parkar Over a year ago

@SeriousJelly it would be Notifications.Notifications.

ChrisBratherton Over a year ago

Tried that too, and now the console is showing $scope.Notifications as undefined and there is no output to my screen :(

Pankaj Parkar Over a year ago

@SeriousJelly seems like you json doesn't have unread value which is filtering noting notification.unread === true here

ChrisBratherton Over a year ago

Ah, yea that makes sense, ermmmm, still if I show {{ Notifications }} in my view, I am getting nothing, Scope also shows as undefined at the first instance (when the app is loaded)

|

Collectives™ on Stack Overflow

AngularJS Data from a Service

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related