AngularJS $resource success and error callback

Question

I have a simple code here that works however I wanted to display the success and error callbacks. This is my code:

angular
    .module('studentInfoApp')
    .factory('Student', Student)
    .controller('StudentsController', StudentsController)
    .config(config);

function config($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'StudentsController',
        templateUrl: 'app/views/student-list.html'
    })
}

function Student($resource) {
    return $resource('/students');
}

function StudentsController(Student, $scope, $http) {

    Student.query(function(data) {
        $scope.students = data;
    });

}

As you can see the function Student() just returns the resource but I can't get the success and error callback if I use the .then for example. Am I missing something here? Thank you!

sp00m · Accepted Answer · 2015-10-01 08:39:57Z

1

Here is a solution:

Student.query(function(data, headers) {
  // OK
  $scope.students = data;
}, function(response) {
  // KO
});

Another one using the promise directly:

Student.query().$promise.then(function(response) {
  // OK
  $scope.students = response.data;
}, function(response) {
  // KO
});

answered Oct 1, 2015 at 8:39

sp00m

49k31 gold badges152 silver badges263 bronze badges

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

3 Comments

wobsoriano Over a year ago

What is the use of the 2nd parameter (headers ) in the function there ?

sp00m Over a year ago

headers is a function that allows you to have access to the response headers, e.g. headers("Content-Type"). See docs.angularjs.org/api/ngResource/service/$resource#usage, section Returns.

wobsoriano Over a year ago

Oh, that's nice. Thank you!

Carsten Farving · Accepted Answer · 2015-10-01 08:55:05Z

1

When using angular $resources you can just save the query directly to your variable. It will then hold the promise and when data returns the data itself.

If you need to handle success/error you can just use the saved promise and add success and error callbacks like below.

$scope.students = Student.query();
$scope.students.$promise.then( function(response) {
     console.log('success');
}, function (error) {
    console.log('error');
});

answered Oct 1, 2015 at 8:55

Carsten Farving

5411 gold badge4 silver badges12 bronze badges

1 Comment

wobsoriano Over a year ago

Thanks for this. Appreciated.

wobsoriano · Accepted Answer · 2015-10-01 08:26:17Z

0

Managed to get it working, but if there are better ways to do it please feel free to post it also. This is my code now:

function StudentsController(Student, $scope) {

    Student.query(function(data) {
        $scope.students = data;
    })
    .$promise.then(function successCallback(response) {
        console.log('success');
    }, function errorCallback(error) {
            console.log('error');
    });

}

answered Oct 1, 2015 at 8:26

wobsoriano

13.5k25 gold badges106 silver badges179 bronze badges

Collectives™ on Stack Overflow

AngularJS $resource success and error callback

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related