$resource with transformResponse Example

by ncapito

HTML

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-resource.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainController">
         <h1>{{title}}</h1>
    <ul>
        <li ng-repeat="x in data"><pre>{{x|json}}</pre>
            <button ng-click="log(x)">Log</button>
             <button ng-click="x.$delete()">delete</button>
             <button ng-click="x.$new()">save</button>
             <button ng-click="x.$save()">new</button>
        
        
        </li>
        </ul>
    </div>
    <div>

JavaScript

angular.module('services', ['ngResource']).
factory("someService", function ($resource) {
    return $resource(
        'http://character-list.herokuapp.com/api/characters/:id', {id: '@id'}, {
        query: {
            method: 'GET',
            transformResponse: function(data, headers){
                data = angular.fromJson(data);
                console.log(data);
                return data && data.data && data.data.results;
            },
            isArray: true
        }
    }

    );
});

var app = angular.module('myApp', ['ngResource', 'services']);


app.controller('MainController', ['$scope', 'someService', function ($scope, svc) {
    $scope.log = function(item){
         console.log(item);   
    }
    $scope.title = 'Transform Test';
    console.log(svc);
    svc.query(function (data) {
        $scope.data = data;
    }, function () {
        console.log('FAILURE');
    });

}]);