current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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]

share|improve this question
    
A follow up: stackoverflow.com/questions/23528451 –  okigan May 7 '14 at 21:11

2 Answers 2

up vote 3 down vote accepted

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.

share|improve this answer
1  
for the JSON parsing, you can stick with the Angular framework by using var jsonData = angular.fromJson(data); –  Spencer May 7 '14 at 17:51
    
Yes definitely an option, updated accordingly, thanks. @Spencer –  dmahapatro May 7 '14 at 17:53
    
Nice! updated plunker: plnkr.co/edit/AVLQItPIfoLwsgDzoBdK?p=preview –  okigan May 7 '14 at 18:01
1  
btw, I used angular.extend() which automates the process even more –  okigan May 7 '14 at 18:07
    
Cool... @okigan –  dmahapatro May 7 '14 at 18:11
up vote 0 down vote

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;
                }
            }
        }
    );
});
share|improve this answer
    
data seems to be raw json, not objects -- please complete the solution (in plunker the button will show message box) –  okigan May 7 '14 at 17:41
    
In the comments it says: "transform to array of objects" you need to add your own logic. –  Armando Borge May 7 '14 at 18:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.