AngularJS - Parsing multiple .then in controller from factory data

Question

I have a controller calling to any set of specified methods in a factory to retrieve information on a given date. Some of the methods iterate through a JSON file to return promise. See factory below with only two methods fleshed out.

            emmanuel.factory('DayService', function($http, $q){
                var obj = {};
                    obj.dayInWeek = function(d){
                        // receives a mm/dd/yyyy string which then it converts it to day object to parse the weekday value
                        var date = new Date(d);
                            var weekday = new Array(
                                'sunday', 
                                'monday',
                                'tuesday',
                                'wednesday',
                                'thursday',
                                'friday',
                                'saturday'
                            );
                            return weekday[date.getDay()];
                    }
                    obj.season = function(d){
                        // receives a mm/dd/yyyy string parses against Calendar service for liturgical season
                        var day = new Date(d).getTime();
                        //$window.alert(day);
                        var promise = $q.defer();
                        $http.get('content/calendar.json').success(function(data) {
                            //$window.alert(data.calendar.seasons.season.length);
                            for (var i=0; i<data.calendar.seasons.season.length; i++){
                                var start = new Date(data.calendar.seasons.season[i].start);
                                var end = new Date(data.calendar.seasons.season[i].end);
                                end.setHours(23,59);
                                //$window.alert(start +'-'+  end +' || '+ day);
                                if (day >= start && day <= end){
                                    //$window.alert(data.calendar.seasons.season[i].name);
                                    var temp = data.calendar.seasons.season[i].name;
                                    promise.resolve(temp);
                                    //$window.alert(promise);
                                    break;
                                }
                            }
                        });

                        return promise.promise;
                    }
                    obj.weekInSeason = function(d){
                        /*...
                            return promise.promise;
                        */
                    }
                    obj.holiday = function(d){
                        /*...
                            return promise.promise;
                        */
                    }
                return obj;
            });

I was tried to write multiple temp.then(function(var) {...}); for each of the methods to store the values in a $scope.date model but to my dismay only the last .then instance would store the value.

            emmanuel.controller('WeekdayMorning', function($scope, DayService){
                var tempWeek = DayService.weekInSeason(today);
                var tempSeason = DayService.season(today);

                tempWeek.then(function(week) {
                    $scope.date = {weekNum: DayService.weekInSeason(today)};
                    $scope.date = {oscWeek: week % 2};
                });

                tempSeason.then(function(season) {
                    $scope.date = {season: DayService.season(today)};
                });
            });

How can I retrieve the data from the factory promise either individual methods or as a complete $scope.date model?

Andrej Kaurin · Accepted Answer · 2014-03-12 08:03:59Z

1

Use $q.all instead (Official documentation for $q):

getData: function (today) {
                return $q.all([
                   DayService.weekInSeason(today),
                   DayService.season(today)
                ]);
          };

and then use then like this:

getData(today).then(function(aggregatedData){
$scope.resultFromWeekInSeason = aggregatedData[0];
$scope.resultFromSeason = aggregatedData[1];
});

Note that this will only resolve when both calls have succeeded, the calls take place simultaneously.

edited Mar 12, 2014 at 8:03

Andrej Kaurin

11.6k14 gold badges48 silver badges55 bronze badges

answered Mar 12, 2014 at 6:25

ms87

17.5k23 gold badges89 silver badges123 bronze badges

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

4 Comments

Alen Giliana Over a year ago

Just to clarify, :getData goes into the factory as a separate method that calls and collects all other promises from within each? If so, do I still keep the return promise.promise; within each method?

ms87 Over a year ago

yes, keep the promises in each method, your service methods shouldn't change. But you should really return promise.resolve(someData) from each of those methods.

Alen Giliana Over a year ago

I can't get anything out of aggregatedData in the controller. Does a method reference factory by this. or actually calling the factory name?

obj.getData = function (d) {                 return $q.all([                     this.dayInWeek(d),                    this.nextDay(d),                    this.season(d),                    this.weekInSeason(d),                    this.holiday(d),                    this.date(d)                 ]);                   };

Alen Giliana Over a year ago

This is hard to read. I created a JSFiddle. Thanks in advance

Chandermani · Accepted Answer · 2014-03-12 06:26:25Z

0

Promise once resolved to a value, i believe cannot change but you are trying to resolve the same promise again and again in for loop with different values. I am not sure how your scenario works, but you can use the promise notification mechanism where you can do this inside the for loop

promise.notify(temp);

and after the loop do

promise.resolve({});

You can catch progress in the third parameter of then

then(successCallback, errorCallback, notifyCallback)

The other option is to collated the temp values into an array inside a for loop.

and then finally to promise.resolve(allTemps)

answered Mar 12, 2014 at 6:26

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

1 Comment

Chandermani Over a year ago

See this too stackoverflow.com/questions/18217640/…

Alen Giliana · Accepted Answer · 2014-03-14 05:38:31Z

0

Thank you all for the help. The issue I was having was related to repeatedly declaring the model on the $scope and not multiple promises.

Every time I re-declared $scope.date= {attr : ...} I eliminated all the previous attribute values, therefore only leaving the last declaration to contain any values. The right way to declare multiple attribute values to Angular $scope model is

$scope.date = { weekday: DayService.dayInWeek(today), season: DayService.season(today), weekNum: week, oscWeek: week % 2, holiday: DayService.holiday(today), nextDay: DayService.nextDay(today) }

answered Mar 14, 2014 at 5:38

Alen Giliana

2,1543 gold badges18 silver badges33 bronze badges

Collectives™ on Stack Overflow

AngularJS - Parsing multiple .then in controller from factory data

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related