$resource .then() throwing error after receiving the resource - angularjs

Question

I'm trying to add a layer of abstraction between the angular $resource received and my controller. I have to perform a few operations like filtering, so I setup a service to perform these in-between functions.
I was able to set up this first resource call with no problems:
/**
* Get Grid
*
* retrieves grid resource and serializes the grid, rows, columns and widgets themselves
*/
this.getGrid = function() {
var gridResource = new GridResource();
var response = gridResource.$query();
var accGrid = new Grid;
response.then(function(response) {
angular.forEach(response.grid, function(row) {
var accRow = new Row;
angular.forEach(row.columns, function(column) {
//Setting up new Column
var accColumn = new Column();
accColumn.setId(column.id);
//Setting up new Widget(s)
var accWidget = new Widget;
accWidget.setId(column.widget.id);
accWidget.setName(column.widget.name);
accWidget.setType(column.widget.type);
accWidget.setChildren(column.widget.children);
accWidget.setVars(column.widget.vars);
accColumn.addWidget(accWidget);
accRow.addColumn(accColumn);
});
accGrid.addRow(accRow);
});
});
return accGrid;
};
This returns the Grid object with all of the populated parts.
However when I try to do perform the same method on a different endpoint, Angular complains:
http://puu.sh/eUSbx/3c15a8b13a.png
I only got to this point in the method:
/**
* Get all Widgets
*
* Retrieves all widgets belonging to the route, regardless if they are in the canvas or not
*/
this.getWidgets = function() {
var widgets = new Array();
var widgetResource = new WidgetResource();
var response = widgetResource.$query();
response.then(function(response) {
console.log(response);
});
return widgets;
};
If you're wondering about the $resource itself:
designService.factory('GridResource', ['$resource',
function($resource){
return $resource('view/canvas', {},
{
query: { method:'GET' },
save: { method:'POST' }
});
}]);
designService.factory('WidgetResource', ['$resource',
function($resource) {
return $resource('view/widget', {},
{
query: { method:'GET', isArray: true }
});
}]);
I'm a PHP guy moving into the wonderful weird world of frontend JS and could really use a pointer :sweaty-smile: thanks!
** Update ** I've learned how Angular uses then to catch error responses too, so I updated my query:
widgetResource.$query().then(
function(response) {
console.log(response);
},
function(error) {
console.log(error);
}
);
Which produced this error:
http://puu.sh/eUYYx/998c73600a.png

Answer 1

Your code seems good, Look around your dependency injection in your controller. You may have missed one or misspelled ?

Answer 2

** Got the answer **
Angular is so damn picky! The problem was I was trying to create a new resource object from one that was already given. Directly assigning the response to to the result of WidgetResource.query() was sufficient. This maybe due to the fact I have the WidgetResource.query() have the isArray property to true.
/**
* Get all Widgets
*
* Retrieves all widgets belonging to the route, regardless if they are in the canvas or not
*/
this.getWidgets = function() {
var widgets = new Array();
//var widgetResource = new WidgetResource();
var response = WidgetResource.query();
response.$promise.then(
function(response) {
console.log(response);
},
function(error) {
console.log(error);
}
);