title: How to alter the data returned by $resource in Angular.js?
body: <p>I'm using an API that returns JSON data in this format:</p>
  
  <pre><code>{
      paging: {
          previous: null,
          next: null
  },
      data: [
          { title: 'First Item' },
          { title: 'Second Item' },
          ...
      ]
  }
  </code></pre>
  
  <p>I'm using Angular's <a href="http://docs.angularjs.org/api/ngResource.$resource" rel="nofollow noreferrer">$resource</a> service to fetch this data.<br/>
  My code - which is located in a controller - goes something like this:</p>
  
  <pre><code>var Entity = $resource('/api/entities');
  var entities = $scope.entities = Entity.get();
  </code></pre>
  
  <p>And then, in the view, I can display the data like this:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-repeat="entity in entities.data"&gt;{{entity.title}}&lt;/&lt;li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>It all works fine, but:</p>
  
  <ul>
  <li>I'd rather expose only the contents of <code>entities.data</code> to the view, instead of the whole <code>entities</code> object. How can I intercept the data returned by the GET request to modify it <strong>before</strong> it populates <code>$scope.entities</code>?</li>
  <li>Correlated question: since I am fetching an <strong>array</strong> of data, it would be cleaner to use <code>Entity.query()</code> instead of <code>Entity.get()</code>. But if I use <code>Entity.query()</code> in the code above, I get an error "TypeError: Object # has no method 'push'". This makes sense, since the API is returning an object instead of an array (hence, no 'push' method on the object). Again, if I could extract the <code>.data</code> attribute from the response, I'd have an array.</li>
  </ul>
  
  <p>Following <a href="https://stackoverflow.com/a/11835877/1153681">these indications</a> by Dan Boyon, I managed to customize the default <code>$resource</code> service and to override the .get() or .query() methods, but I'm not sure where to go from there.</p>