Angular $resource and use of Interceptor to check response/error/callback

Question

Last few days I am working to invoke REST services and track the response, error, callback etc. I have gone through most of the posting however due to my limited understanding on Angular seems like I am not able to understand it. Following is my problem and understanding I got so far.

I am using Project.$update() service which returns only "project_id". This server doesn't return complete data again. Following is line of few line of code to share here.

//create Project factory
app.factory('Project', function ($resource) {
    return $resource('/api/projects/:projectid',
            {projectid:'@id'},
            {update: {method:'PUT', isArray:false}}    
    );

});

Following is code in directive I am using to update/create project.

//save project
            scope.saveProject = function (project) {
                //update modified by field
                project.modifiedby = scope.user._id;
                //change to view mode
                scope.projectView = 1;
                //call server to save the data                
                if (project._id == undefined || project._id == "") {

                    //Call server to create new and update projectID
                    project._id = project.$save()._id;
                }
                else {
                    //Call server to update the project data
                    project.$update({ projectid: project._id });
                }


            };

Following is service response for both save() and update().

{"_id":"52223481e4b0c4d1a050c25e"}

Problem here is; "project" object value is replaced by new response returned by server having only project_id and other fields are replaced.

I was going through detailed documentation on $resource however I am not able to grasp it. It will be great to get some guidance here to write code to detect error, response, callback.

jvandemo · Accepted Answer · 2013-09-02 20:55:20Z

0

You can replace the original object by the one returned from the server in your success callback like this:

        //save project
        scope.saveProject = function (project) {

            //update modified by field
            project.modifiedby = scope.user._id;

            //change to view mode
            scope.projectView = 1;

            //call server to save the data                
            if (project._id == undefined || project._id == "") {

                //Call server to create new and update projectID
                project.$save(function(updatedProject, headers){

                    // Replace project by project returned by server
                    project = updatedProject;
                });
            }
            else {
                //Call server to update the project data
                project.$update(function(updatedProject, headers){

                    // Replace project by project returned by server
                    project = updatedProject;
                });
            }

        };

That will replace the original object by the one returned by the server as soon as the server response is received.

If your callback is identical for the $save and $update methods, you can further simplify your code like this:

        //save project
        scope.saveProject = function (project) {

            //update modified by field
            project.modifiedby = scope.user._id;

            //change to view mode
            scope.projectView = 1;

            var action = (angular.isDefined(project._id)) ? '$update' : '$save';

            //call server to save the data                
            project[action](function(updatedProject, headers){

                // Replace project by project returned by server
                project = updatedProject;
            });

        };

Hope that helps!

answered Sep 2, 2013 at 20:55

jvandemo

13.3k2 gold badges25 silver badges18 bronze badges

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

6 Comments

joy Over a year ago

I don't think it will work...because as i mentioned earlier; server is not returning complete project object; instead of that server is only returning "project_id"

joy Over a year ago

I just tried this approach however it didn't work.....it will be great if you can share other approach. I am really stuck here.

jvandemo Over a year ago

If you are following the REST standard then the server should respond with the object created or updated. This is because the server can normalize data e.g. adjust casing or formatting and thus the response reflects the normalized data. You cannot safely assume that the user input is valid unless it is returned by the server. So in essence if you have control over the server side, it is strongly recommended that you return the updated object as the body of the response (json) with an appropriate HTTP status code.

joy Over a year ago

Server side API is managed by other team and I really doubt that they will agree to change the code to return the bulk data in response. Do we have any other solution?

jvandemo Over a year ago

Yes, you can clone the object before it is saved and assign the clone in the success callback once the save has succeeded. That should give you the desired result.

|

joy · Accepted Answer · 2013-09-04 22:11:45Z

As per suggestion made by jvandemo and BoxerBucks; I have used following approach for save/update by passing the callback method with copy of original data. However still I am looking for central approach to take care of error/success status. Please suggest.

//save project metadta
            scope.saveProjectMetadta = function (project) {

                //update modified by field
                project.modifiedby = scope.user._id;
                //change to view mode
                scope.projectView = 1;
                //keep original data to pass into callback
                var originalProjectObject = angular.copy(project);
                //call server to save the data                
                if (project._id == undefined || project._id == "") {                    
                    //Call server to create new and update projectID
                    project.$save(originalProjectObject, function (projectResponse) {
                        originalProjectObject._id = projectResponse._id;
                        //update scope
                        scope.project = originalProjectObject;
                        //invoke method to update controller project object state
                        scope.updateProjectScope(scope.project);
                    });

                }
                else {
                        //Call server to update the project data
                        project.$update({ projectid: project._id }, function (projectResponse) {

                        originalProjectObject._id = projectResponse._id;
                        //update scope
                        scope.project = originalProjectObject;
                        //invoke method to update controller project object state
                        scope.updateProjectScope(scope.project);

                    },originalProjectObject);

                }
            };

Collectives™ on Stack Overflow

Angular $resource and use of Interceptor to check response/error/callback

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related