Difference of calling Restangular from state resolve and from controller

Issue

I am using Restangular and angularJS.

Below is my controller code.
I am not able to print teacher output on console and I am not able to play with vm.teacherList.

CASE 1:

    angular.module("subjectManagement").controller('subjectTeacherAllocationCtrl',
         function ($scope, $state, $location, Restangular) {
             var vm = this;
             vm.teacherList = Restangular.all("teacher").getList().$object;
             console.log( " vm.teacherList ---> " + vm.teacherList);
     });

 console output is only  `vm.teacherList --->`

when I am checking Network XHR, I am able to teacher response with data like

[{teacherId: "3", empId: "9", teacherDateOfJoining: "2015-11-02", teacherJoiningGrade: "TGT",…},…]
0: {teacherId: "3", empId: "9", teacherDateOfJoining: "2015-11-02", teacherJoiningGrade: "TGT",…}
1: {teacherId: "4", empId: "10", teacherDateOfJoining: "2015-11-02", teacherJoiningGrade: "TGT",…}

CASE 2:
If I put same code line in state resolve instead of controller. I can print vm.teacherList in console and I can do anything with vm.teacherList.

.state('subjectTeacherAllocation', {
                        url: '/subject/subjectTeacherAllocation',
                        templateUrl: 'app/subject/edit/subjectTeacherAllocation.html',
                        controller: 'subjectTeacherAllocationCtrl as vm',
                        resolve: {

                            teacher: function (Restangular, $stateParams) {
                                return Restangular.all('teacher').getList();
                            }
                        }
                    })

  angular.module("subjectManagement").controller('subjectTeacherAllocationCtrl',
     function ($scope, $state, $location, teacher, Restangular) {
         var vm = this;
         $scope.teacher = {}
         vm.teacherList = teacher.plain();

         console.log( " vm.teacherList ---> " + vm.teacherList);

 });




console output is only  vm.teacherList --->  vm.teacherList ---> [object Object],[object Object],[object Object],[object Object],[object Object]

I want to understand what is the difference between these two (case 1 & case 2 )
and How can I achieve, printing vm.teacherList in case 1, same way as case 2

Solution

Case1

According to the documentation, getList.$object returns the reference to an empty object that the data will populate when the request is done. So if you try and print the data right away you will only see that empty object. When you check the network object in the developer console you are seeing the completed request which is why you see the data.

Case 2

Since you are in the resolve block, the state does not change until all requests are finished. So your call from Restangular must finish before the next step. When your controller loads, teacher is a fully populated object and you can use the data as expected.

Making Case 1 work like Case 2

Use the promise returned by Restangular.all().getList and on success populate the data.

 vm.teacherList = {};
 Restangular.all('teacher').getList().then(function success(data) {
   vm.teacherList = data;
   console.log(vm.teacherList);
 });

Answered By – S. Simpson

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.