How to read response from angular resource $save() and also keeping original data

Question

I am new to Angular. I am sure I am missing some basic stuff here.

I have one object which I post to the server to create it. The Server returns the object Id, which I need to read and update the object I have in the client.

The server will only return the object ID, however, at the client side, I have other data which I am not able to use when I perform a callback (I don't have access to the original data).

The Following jsfiddle code has been added as a reference:

//Get Angular Project module
var app = angular.module("app", ['ngResource']);

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

});


//Controller for testing
app.controller('ApplicationController', function ($scope, Project) {

//Project object
var project = new Project({"name":"New Project Test","thumbnail":"","statusid":"521d5b730f3c31e0c3b1e764","projecttypeid":"521f585c092a5b550202e536","teamid":"521f585a092a5b550202e521","authors":[{"firstname":"Dilip","lastname":"Kumar"}],"projectspecificmetadata":{"isbn13":"345345","guid":"asfas"},"modifiedby":"521f585a092a5b550202e525"}
);
//Create new project
project.$save(project, function (projectResponse) {
                        project.projectId = projectResponse._id;
                        alert(project.name);
                    });

});

Issie

Answer 1

Following is similar approach for $update.

 //keep original data to pass into callback
 var originalProjectObject = angular.copy(project);
 //Call server to update the project data
 project.$update({ projectid: project._id }, function (projectResponse) 
 {
   originalProjectObject._id = projectResponse._id;
   //update scope
   scope.project = originalProjectObject;                        
 },originalProjectObject);

Issie

Answer 2

I think you want something like this:

//Controller for testing
app.controller('ApplicationController', function ($scope, Project) {

        //Project object
        var projectData = {"name":"New Project Test","thumbnail":"","statusid":"521d5b730f3c31e0c3b1e764","projecttypeid":"521f585c092a5b550202e536","teamid":"521f585a092a5b550202e521","authors":[{"firstname":"Dilip","lastname":"Kumar"}],"projectspecificmetadata":{"isbn13":"345345","guid":"asfas"},"modifiedby":"521f585a092a5b550202e525"};
        var project = new Project(projectData);

        //Create new project
        project.$save(project, function (projectResponse) {
                                projectData.projectId = projectResponse.id;
                                console.log("ProjectData: %j", projectData);
                            });

    });

Trager

Not sure I completely understand. The callback is the second argument to the save function. Inside that callback you have access to the response of the server via 'projectResponse'. – Trager

i want to get response from server and update my object which i sent to server to store into database....hope it explained. – Issie

So inside of the callback where you have project._id = blah.. update the client side object here. This is where you have access to the data the server has returned. – Trager

Server is returning projectId. One option is i can again call to server to get the data for given projectId. However in this case I am not utilizing the data that i already have which i sent to server (only difference in the data that I posted on sever is not having projectId) – Issie

It's a closure so if you have access to the data you are talking about in the surrounding scope, you can access that same data inside the callback. – Trager

My apology. I am still not able to understand. I use following code. Not sure how to retain original data. //scope.project modal is updated via UI //Call server to create new project scope.project.$save(scope.project,function (projectResponse) { //Update projectID scope.project._id = projectResponse._id; }); – Issie

I tried; however it is not working. In call back it is replacing all original data in "myOriginalClientData" and keeping only "projectId". – Issie

I updated to set your project object. Its the same concept though. – Trager

I really apologize. Its not working. Finally i have created jsfiddle to share my problem in details. Going forward i will always use jsfiddle as it is easy to share problem. If you see; i have added alert() option which is showing that data has been lost. Please help. – Issie

sorry...this jsfiddle will not work because service is not exposed on public network...however you can see my problem. – Issie

Ok, I set this entire thing up locally. The key is to separate the Project object and the data. I updated the answer. – Trager

Thanks BoxerBucks...after thinking more on your solution approach; I am now able to take care of this for "save" operation. How can i pass data in $update() operation. I am posting more details as post. – Issie

Following is my $update service call. //Call server to update the project data project.$update({ projectid: project._id }, function (response) { scope.project = Project.get({ projectid: response._id }); //update id forcely scope.project._id = response._id; }); – Issie

I found the approach for $update as well. It is similar to what you suggested. Thanks a lot for your help. It is working fine now. – Issie