Why does angular $resource add extra objects ($promise, $resolve…) to my data response?

Question

I return a resource with a URL

    $resource(\"http://foo.com/bar.json\").get().
         $promise.then(function(data){ $scope.result = data}, 
                     


        

Answer 1

You need to return wrapped result like {'result': { 'some_key': 'some_val' }} from your backend. Or just do like described above.

Diary.getSharedWithMe(function(data) {
        delete data.$promise;
        delete data.$resolved;
        _self.sharedDiariesWithMe = data;
    }, function(error) {
        console.log(error)
    });

Answer 2

So in case someone else is stumbling here and didn't understand promises/angularjs here is what is going on. When you use .then() or .get() you get a promise and some helper functions all in the same object. This is awesome because then you don't worry about callbacks being defined and whether data is available because the promise object always has some properties. This object contains your raw data in another object within. So the promise object is nested, you just have to reference the data object within when the data is ready.

Here's what I was doing

     $resource("http://foo.com/bar.json").get().
         $promise.then(function(data){ $scope.result = data}, 
//data is actually a promise object.
                  function(error){ $scope.msg = "error" } );

promise object

Note the data is actually under another object called "data". So in your success callback to get just the data you should do in this case: data.data

Answer 3

To automatically remove them from every request, you can add an interceptor:

angular.module('app').config(config);

config.$inject = ['$httpProvider'];
function config($httpProvider) {
    $httpProvider.interceptors.push(interceptor);
}

interceptor.$inject = [];
function interceptor() {
    return {
        request: (config) => {
            if (config.data) {
                delete config.data.$promise;
                delete config.data.$resolved;
            }
            return config;
        }
    };
}

Answer 4

If you look at the angular source here:

https://github.com/angular/angular.js/blob/master/src/ngResource/resource.js#L505

There is a toJSON method on the Resource prototype chain that will accomplish this for you.

For example:

$resource("http://foo.com/bar.json").get(function(res) {
    $scope.result = res.toJSON();
});

Answer 5

$resource returns an object or array that will have your data when the call completes. All those functions are there to help you out and $resource is mainly intended for CRUD operations. If you want the data, you have to wait for it to get returned so you might as well use the promise. If you want to strip all of those properties you can use angular.toJson to convert it to json, but angular does that for you when posting it back to a resource or $http call so you shouldn't have to.

$scope.data = $resource("http://foo.com/bar.json").get();
// $scope.data does not have your data yet, it will be
// populated with your data when the AJAX call completes
...
// later in a call from a save button maybe you can just do
// this to post your changes back:
$scope.data.$save();