1

So I have two functions within an angular service, a getRatings function function that calls a mongoDb database and returns a JSON object of ratings, and a getAverageRatings service that calls the getRatings function which is then supposed to return an average of the ratings.

The problem is is that I'm getting undefined when I return the calculated average, even when I see that I'm getting the correct calculated average from my console.logs. One of my co-workers said that I'm not using a promise correctly and that's what I need to return and resolve to get the correct value, but after trying a few things I cannot figure it out. 

 getRatings: function (contentId, callback) {

        console.log("in getRatings");
        var deferred = $q.defer();

        return $http.get(CONTENT_API + '?contentId=' + contentId)
            .then(function (response) {

                if(typeof response.data === 'object'){
                    console.log("Promise in contentRatingService successful, returning promise");
                    deferred.resolve(response.data);
                    return response.data;
                }

                else {
                    return $q.reject(response.data);
                }
        }, function(response){
                // something went wrong
                return $q.reject(response.data);

            });
    },

and 

getAverageRating: function (contentId) {
        this.getRatings(contentId).then(function(data){
            var allRatings = data;

            console.log("getAverageRating data: ");
            console.log(allRatings);
            var ratingTotal = 0;

            for (var i =0; i<allRatings.length; i++) {
                console.log("rating " + i + " is " + allRatings[i].rating);
                ratingTotal = ratingTotal + allRatings[i].rating;
            }

            var average = ratingTotal/allRatings.length;
            console.log("Length of allRatings: "+ allRatings.length);

            average = Math.round(average);
            console.log("The average is: " + average);
            //deferred.resolve();
            return average;

        }, function(error) {
            //promise rejected
            console.log(error);
        });
    },

I'm calling this code from an angular 1.5 component controller like this:

$scope.averageRating = contentRatingService.getAverageRating("1232412");

Here is a screenshot of my logs to show that I'm calculating the average correctly, but getting undefined when assigning it to an actual variable:

Picture of logs

Any help would be greatly appreciated.

Ryan Sevilla
  • 11
  • 2
  • 1
    You can't. You need to return a promise. You don't need to use deferreds at all. – SLaks Aug 15 '16 at 20:53
  • @SLaks right so how do I actually go about returning the promise? – Ryan Sevilla Aug 15 '16 at 21:03
  • Just `return` the promise from `then()`, like you do in your other function. – SLaks Aug 15 '16 at 21:04
  • How do you use those methods? – dfsq Aug 15 '16 at 21:12
  • But aren't I already returning data from the .then and then assigning it to allRatings? Do I need another .then()? – Ryan Sevilla Aug 15 '16 at 21:12
  • @dfsq I'm calling these methods from a component controller to display them within my application. – Ryan Sevilla Aug 15 '16 at 21:14
  • *"The problem is is that I'm getting undefined when I return the calculated average"* - code for this, I mean. – dfsq Aug 15 '16 at 21:15
  • @dfsq added to original post. Calling from an angular controller like $scope.averageRating = contentRatingService.getAverageRating("1232412"); – Ryan Sevilla Aug 15 '16 at 21:20
  • You can't return from async function. Since you are using promises you will have to use something like this: `contentRatingService.getAverageRating("1232412").then(function(data) { $scope.averageRating = data })`. and return promise from `getAverageRating`. – dfsq Aug 15 '16 at 22:29

0 Answers0