AngularJS/Ionic promises - sometimes page loads forever

Question

I am using promises in my controller, and most of the times it works well. But sometimes it just loads forever and the WordPress.getAllCategories() function does not even get called.

This is my controller: var mod = angular.module('app.controllers.home', []);

mod.controller('HomeCtrl', function ($scope, $q, $sce, $ionicPlatform, WordPress, Loading) {
  console.log('HomeCtrl init');

  $scope.$on('$ionicView.enter', function () {
    Loading.show();

    WordPress.getAllCategories()
      .then(function (cats) {
        console.info(angular.toJson(cats));
        console.info('cats ^');
        $q.all(cats.data.map(function (cat) {
          var d = $q.defer();

          console.error(cat.name);

          WordPress.getLatestPostOfCategory(cat.id)
            .then(function (post) {

              console.debug(post.data.title.rendered);

              WordPress.getMediaById(post.data.featured_media)
                .then(function (media) {

                  console.log(media.data.source_url);

                  cat.firstPost = {};
                  cat.firstPost.id = post.data.id;
                  cat.firstPost.title = post.data.title.rendered;
                  cat.firstPost.content = post.data.content.rendered;

                  if (cat.firstPost.title.length > 50) {
                    cat.firstPost.title = cat.firstPost.title + '...';
                  }

                  if (cat.firstPost.content.length > 70) {
                    cat.firstPost.content = cat.firstPost.content.substr(0, 60) + '...';
                  }
                  cat.firstPost.thumbnail = media.data.source_url;
                  d.resolve(cat);
                }, function (err) {
                  console.error(angular.toJson(err));
                });
            });

          return d.promise;
        })).then(function (cats) {
          console.log('Loaded all articles and for main page.');
          $scope.homeCategories = cats;
          Loading.hide();
        });
      });
  });
});

Is there anything wrong in my controller? P.S. I also debug all the WordPress service functions and they work just fine, and provide the needed data.

EDIT:

Sometimes when it loads forever, I see the console.error(cat.name); debug message only logs 3 messages. But still proceeds to the next function...

Avoid the [deferred antipattern](http://stackoverflow.com/q/23803743/1048572) and all your problems will go away! (hint: you're leaving some promises in the array forever pending) — Bergi, Apr 13 '16 at 13:04
@Bergi Can you please try to give me an example? I am trying for hours... — Ariel Weinberger, Apr 13 '16 at 13:37
Always `return` a promise, from *every* function that does something asynchronous. Especially `then` callbacks. — Bergi, Apr 13 '16 at 13:43
@Bergi Hey, is this better? Am I on the right way for the solution? https://jsfiddle.net/48v4f5nw/1/ — Ariel Weinberger, Apr 13 '16 at 13:56
Yes, that's it, I don't see anything missing. Is it working? You might want to [post it as an answer](http://stackoverflow.com/help/self-answer) — Bergi, Apr 13 '16 at 14:09
Actually it does work. Thanks a lot @Bergi! Will do but I am not sure if I can accept my own answer. — Ariel Weinberger, Apr 13 '16 at 14:12

Ariel Weinberger · Answer 1 · 2016-04-13T14:19:44.553

This is how I solved it, by Bergi's advice.

Source for help: Promise anti pattern by Gorgi Kosev (bluebird)

   var categories = [];

    function sort() {
      return WordPress.getAllCategories()
        .then(function (cats) {
          console.log('thens');
          return $q.all(cats.data.map(function (cat) {
            console.info('cat: ' + cat.name);

            var category = {};
            category.name = cat.name;

            return WordPress.getLatestPostOfCategory(cat.id)
              .then(function (post) {

                var post = post.data;
                category.post = {};
                category.post.id = post.id;
                category.post.title = post.title.rendered;
                category.post.content = post.content.rendered;

                console.log('ID: ' + category.post.id + ', title: ' + category.post.title);

                return WordPress.getMediaById(post.featured_media);
              }).then(function (media) {
                category.post.thumbnail = media.data.source_url;

                categories.push(category);
                console.log('Pushed category "' + category.name + '"');
              });
          }));
        }, function (err) {
          console.error('ERR1');
          console.error(angular.toJson(err));
        });
    }

    sort()
      .then(function () {
        console.info('LOADED ALL CATEGORIES');
        $scope.categories = categories;
      }, function (err) {
        console.error('err:' + angular.toJson(err));
      });

AngularJS/Ionic promises - sometimes page loads forever

1 Answers1