$scope issue with gridOptions, angular-ui-grid and REST call from service

Question

I seem to be having an issue getting my ng-grid directive to populate from a returned REST api json obj. I have verfied that a valid json obj is returned and i have retrieved a nested obj of the data I need. It seems that it is not making it into the gridOptions function. Where myData is the correct valid json. Any help will be greatly appreciated. I am pulling my hair out at this point. Here is my service: grid-service.js

'use strict';
app.factory('GridService', ['$http', '$q', function($http, $q) {
    var apiUrl = "http://xx.xx.xx.xx/coName/public/index.php/";

// configure the send request
function sendRequest(config){
    var deferred = $q.defer();
    config.then(function(response){
        deferred.resolve(response);
    }, function(error){
        deferred.reject(error);
    });
    return deferred.promise;
}

// retrieve all
function getRoles() { 
    var request = $http({
        method: 'GET',
        url: apiUrl + 'roles'
    }); 
    return sendRequest(request);
}

return {        
    getRoles: getRoles                
};
}]);

I inject it into my ctrl here, and my init function and gridOption functions:

app.controller('ModuleCtrl', [ '$scope', '$http', '$modal', '$filter', 'GridService', function($scope, $http, $modal, $filter, gridService) {
    var initializeGrid = function(){        
    getRoles(); 
};
var getRoles = function(){
    gridService.getRoles().then(function(myRoles){
    var myRolesData = myRoles.data._embedded.roles;            
    $scope.myData = myRoles.data._embedded.roles;
    console.log($scope.myData);
});
};
$scope.gridOptions = {
    data: 'myData',
    enableRowSelection: true,
    enableCellEditOnFocus: true,
    showSelectionCheckbox: true,
    selectedItems: $scope.selectedRows,
    columnDefs: [{
       field: 'ID',
       displayName: 'Id',
       enableCellEdit: false
    }, {
       field: 'APP_ID',
       displayName: 'Module ID',
       enableCellEdit: false
    }, {
       field: 'RLDESC',
       displayName: 'Role Description',
       enableCellEdit: true
    }, {
        field: 'APDESC',
        displayName: 'Module Description',
        enableCellEdit: true
    }, {
        field: 'ZEND_DB_ROWNUM',
        displayName: 'Record number',
        enableCellEdit: false
    }]
};            
// fire it up
initializeGrid();
}

My complete json:

{
"_links": {
    "self": {
        "href": "http://xx.xx.xx.xx/coName/public/index.php/roles?page=1"
    },
    "describedBy": {
        "href": "Some Fun Stuff"
    },
    "first": {
        "href": "http://xx.xx.xx.xx/coName/public/index.php/roles"
    },
    "last": {
        "href": "http://xx.xx.xx.xx/coName/public/index.php/roles?page=1"
    }
},
"_embedded": {
    "roles": [
        {
            "ID": 1,
            "APP_ID": 1,
            "RLDESC": "Admin",
            "APDESC": "authLive",
            "ZEND_DB_ROWNUM": "1"
        },
        {
            "ID": 2,
            "APP_ID": 1,
            "RLDESC": "User",
            "APDESC": "authLive",
            "ZEND_DB_ROWNUM": "2"
        },
        {
            "ID": 4,
            "APP_ID": 1,
            "RLDESC": "SuperUser",
            "APDESC": "authLive",
            "ZEND_DB_ROWNUM": "3"
        }
    ]
},
"page_count": 1,
"page_size": 25,
"total_items": 3
}

S. Baggy · Accepted Answer · 2015-03-05 21:03:18Z

1

Remove the following line from the gridOptions

data: 'myData'

Then in getRoles() use

$scope.gridOptions.data = myRolesData;

instead of

$scope.myData = myRoles.data._embedded.roles;

(Maybe you need $scope.myData for some other reason than the grid, but if not I think the above is all you need. I have not tested this live, but it should work.)

answered Mar 5, 2015 at 21:03

S. Baggy

95810 silver badges22 bronze badges

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

3 Comments

Stephen Nielsen Over a year ago

Thats funny, I had just changed that and Now gridOptions contains the data. So thanks. I was actually coming in to post my answer. But you beat me to it. I am a little confused still, the ng-grid does not render a grid. It is just a blank page with an add and delete button. If I inspect or view source i see the gridOptions in the ui-grid attr. but the table does not render. Thoughts?

S. Baggy Over a year ago

You should probably post your HTML and the module code, perhaps as a separate question. I use ui-router to match up the HTML to the grid I want, so this might not be applicable to your situation. Glad the first part is working though!

Stephen Nielsen Over a year ago

Thanks @S. Baggey .. I figured it out, and I should have asked a new question. For those that are curious, if you are using angular-ui-grid the proper directive is ui-grid not ng-grid

Collectives™ on Stack Overflow

$scope issue with gridOptions, angular-ui-grid and REST call from service

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related