Return value of a promise to a function in AngularJS

Question

I have a problem with outputting the values of a promise function.

$scope.getTeacher = function(teacherAbr) {
  var promise = dataService.getTeacher(teacherAbr);

  var testje = promise.then(function(payload) {
    return payload;
  });

  return testje; // outputs an d object, not the direct payload values
};

The output of this controller function is this: output of function

However, when I'm doing testje.$$state it returns undefined. How can I output the value object? I can't output the payload variable in a new $scope, because this data is dynamic.

Here is a simplified version of this on Plunker.

dfsq · Accepted Answer · 2014-09-22 12:51:20Z

6

You should change the way you think about things when you work with asynchronous code. You no longer return values, instead you use Promise or callback patterns to invoke code when data becomes available.

In your case your factory can be:

.factory('dataService', function($http, $log, $q) {
    return {
        getTeacher: function(teacher) {
            // Originally this was a jsonp request ('/teacher/' + teacher)
            return $http.get('http://echo.jsontest.com/key/value/one/two').then(function(response) {
                return response.data;
            }, function() {
                $log.error(msg, code);
            })
        }
    };
});

And usage in controller:

dataService.getTeacher('Lanc').then(function(data) {
    $scope.teacher = data;
});

Also $http.get already returns promise, so you don't have to create one more with $q.defer().

Demo: http://plnkr.co/edit/FNYmZg9NJR7GpjgKkWd6?p=preview

UPD

Here is another effort for combining lessons with teachers.

Demo: http://plnkr.co/edit/SXT5QaiZuiQGZe2Z6pb4?p=preview

edited Sep 22, 2014 at 12:51

answered Sep 22, 2014 at 9:25

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

6 Comments

spacek33z Over a year ago

Thanks, but how can I use this in a template with ng-repeat? There are multiple teachers in the ng-controller. So I need something like this: <div ng-repeat="teacher in getTeacher(lesson.teacher)"></div>

dfsq Over a year ago

You simply use $scope.teachers object in template: <div ng-repeat="teacher in teachers)"></div>.

spacek33z Over a year ago

That's not the problem unfortunately, I've made a better demo to illustrate it. Thank you very much for helping me btw :).

dfsq Over a year ago

I see what your problem is.. Then it becomes more complicated. See this demo.

dfsq Over a year ago

You can't achieve it like your are trying to do it. So you need to combine teacher info with lesson outside of ngRepeat. I would recommend to make your webserver do it: it's very easy with LEFT JOINS, etc. Or you can do it like I did in another demo. See updated answer.

|

shamon shamsudeen · Accepted Answer · 2014-09-22 09:21:45Z

0

//in your services file

  return {
      getTeacher: function (teacher) {
        // Originally this was a jsonp request ('/teacher/' + teacher)
       return $http.get('http://echo.jsontest.com/key/value/one/two')

        })

//change the controller to this

dataService.getTeacher(teacherAbr).then(function(msg){

     $scope.getdata=msg.data;
      console.log("From server"+msg.data);

});

answered Sep 22, 2014 at 9:21

shamon shamsudeen

5,94120 gold badges76 silver badges146 bronze badges

Collectives™ on Stack Overflow

Return value of a promise to a function in AngularJS

2 Answers 2

Demo: http://plnkr.co/edit/FNYmZg9NJR7GpjgKkWd6?p=preview

UPD

Demo: http://plnkr.co/edit/SXT5QaiZuiQGZe2Z6pb4?p=preview

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo: http://plnkr.co/edit/FNYmZg9NJR7GpjgKkWd6?p=preview

UPD

Demo: http://plnkr.co/edit/SXT5QaiZuiQGZe2Z6pb4?p=preview

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related