Working with promises in Angular

Question

I am trying to adapt a NodeJs/AngularJs tutorial http://sahatyalkabov.com/create-a-tv-show-tracker-using-angularjs-nodejs-and-mongodb/ to using Postgres and the Sequelize ORM. The ORM has changed as it now uses Bluebird promises.

I'm hitting my database to return a number of TV shows and in return I get a list of shows and their episodes. This is the html before I used promises:

<div class="col-xs-4 col-md-3" ng-repeat="show in shows | filter:query | orderBy:'rating':true">
    <a href="/shows/{{show.id}}"><img class="img-rounded" ng-src="{{show.poster}}" width="100%"></a>
    <div class="text-center">
        <a href="/shows/{{show.id}}">{{show.name}}</a>
        <p class="text-muted">Episodes: {{show.episodes.length}}</p>
    </div>
</div>

So I use the $resource service and a ng-repeat loop, however since I changed to promises I don't seem to be able to access the episodes, but in my console I see the $scope.shows is equal to:

[$promise: Object, $resolved: false]
0: Resource
$$hashKey: 57
Episodes: Array[68]
airs_day_of_week: "Sunday"
airs_time: "9:00 PM"
createdAt: "2014-10-14T10:29:27.287Z"
first_aired: "2008-01-20T00:00:00.000Z"
genre: Array[4]
id: 81189
name: "Breaking Bad"
network: "AMC"
overview: "Walter White, a struggling high school chemistry teacher, is diagnosed with advanced lung cancer. He turns to a life of crime, producing and selling methamphetamine accompanied by a former student, Jesse Pinkman, with the aim of securing his family's financial future before he dies."
poster: "posters/81189-22.jpg"
rating: "9.30"
rating_count: 645
status: "Ended"
updatedAt: "2014-10-14T10:29:27.287Z"
__proto__: Resource
$promise: Object
$resolved: true
length: 1
__proto__: Array[0]

How can I access the episodes.length now? show.name works but show.episodes.length returns undefined.

My resource invocation looks like this:

in the controller:

$scope.shows = Show.query();

in the services:

angular.module('MyApp')
    .factory('Show', ['$resource',
        function ($resource) {
            return $resource('/api/shows/:id');
        }]);

It seems the shows is an `object` instead of `array`. How does your resource invocation look like. — Chandermani, Oct 14 '14 at 11:00
It is an array, can you check in console what $scope.shows[0] prints — Chandermani, Oct 15 '14 at 07:11

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

It is worth to note that you can't freely put promises in your templates and expect Angular to resolve them since v 1.2:

Take a look at this SO:

Angularjs promise not binding to template in 1.2.

What you can do when you are getting your results from your service, is to put the results, not the promise, in scope:

http://plnkr.co/edit/SU5UMK7jNffXWnWiV1HE?p=preview

SomeService.getSomeData().then(function(res) {
  $scope.someData = res;
});

In your case, probably more like:

ShowsService.getShows().then(function(shows) { $scope.shows = shows; });

Edit: Of course, since you are using $resource, and not Restangular, you should convert my example to something that $resource would find acceptable:

Show.query('', function(shows){
     $scope.shows = shows;
});

edited May 23 '17 at 12:20

Community

1
1

answered Oct 14 '14 at 11:51

Nikola Yovchev

9,498
4
46
72

I tried to do your suggestion, by amending Show.query(); `Show.query().then(function (shows) {$scope.shows = shows;})` see the edited question, it returns `TypeError: undefined is not a function.` – Bondifrench Oct 14 '14 at 20:14
I think I did a stupid mistake in my Angular/HTML code, once I changed to `{{show.Episodes.length}}`, everything worked fine!! I did learn something in the meantime so thanks! – Bondifrench Oct 18 '14 at 04:22

Working with promises in Angular

1 Answers1