5

How to make angularjs $resource return an array of objects derived/prototyped from specified domain object?

Here is an example on http://plnkr.co/edit/AVLQItPIfoLwsgDzoBdK?p=preview that processes a set of Notes objects.

app.controller('MainCtrl', function($scope, NoteResource) {
$scope.name = 'World';
$scope.notes  = NoteResource.query();

$scope.spellCheckAllNotes = function() {
  angular.forEach($scope.notes, function(note) {
    note.spellCheck();
   });
 }
});

The issue is that $resource returns array of Resources and not an array of Notes with Resource methods added to prototypes.

[solution shall follow "good" javascript practices]

1

2 Answers 2

10

Here is the completed plunker. Yes raw json is parsed to JSON object. It is using transformResponse as mentioned by Armando.

app.factory('NoteResource', ['$resource',
  function($resource) {
    var res =  $resource('http://okigan.apiary.io/notes/:id', {}, {
      query: {
        method: 'GET',
        params: {
        },
        isArray: true,
        transformResponse: function(data, header){
          //Getting string data in response
          var jsonData = JSON.parse(data); //or angular.fromJson(data)
          var notes = [];

          angular.forEach(jsonData, function(item){
            var note = new Note();
            note.noteTitle = item.title;  
            notes.push(note);
          });

          return notes;
        }
      }
    });
    return res;
  }
]);

Just to show title is not used from the raw resource, I modified title to noteTitle in Note and in html.

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

8 Comments

for the JSON parsing, you can stick with the Angular framework by using var jsonData = angular.fromJson(data);
Yes definitely an option, updated accordingly, thanks. @Spencer
btw, I used angular.extend() which automates the process even more
Does this still work with later AngularJS versions. For me it's still a series of Resource objects and a couple of others like $promise and resolve.
Yes it does. I am using the same principle in v1.3.13 @sathishvj
|
1

You can manipulate your data using transformResponse option in your resource service definition (make sure to set isArray to true):

angular.module('services', ['ngResource']).
    factory("yourService", function ($resource) {
        return $resource(
            '/custom/url', {}, {
            get: {
                method: 'GET',
                isArray: true,
                transformResponse: function(data, headers){
                    //
                    // transform to array of objects 
                    return data;
                }
            }
        }
    );
});

2 Comments

data seems to be raw json, not objects -- please complete the solution (in plunker the button will show message box)
In the comments it says: "transform to array of objects" you need to add your own logic.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.