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

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

** 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);
        }
    );