ng-grid doesn't populate with angular $resource

Question

I'm trying to populate an ng-grid, using and ngResource $resource call, but it seems that the ajax call is always too late, after the ng-grid has already been rendered. The grid renders the headers but is not populated with data. Here's a snippet of the code and a jsfiddle

    angular.module('api', [ 'ngResource' ]).factory("SERVICE", function($resource) {
    return $resource('/api/...', {}, {
        query : {
            method : 'GET',
            isArray : true,
            transformResponse : function(data, headers) {
                var responsedata = [], data = angular.fromJson(data);
                angular.forEach(data.el, function(item, idx) {
                    //do something to data and add it to responsedata
                    responsedata.push({"a": item.a});
                });
                return responsedata;
            }
        }
    });
});
var app = angular.module('myModule', [ 'ngResource', 'api', 'ngGrid' ]);
app.controller('GridController', [ '$scope', 'SERVICE', function($scope, svc) {
    $scope.myData = svc.query();
    $scope.gridOptions = {
        data : myData,
        columnDefs : [{
            field : "a",
            displayName : "a"
        }]
    };  
} ]);
<!-- the html-->
<div class="gridStyle" ng-grid="gridOptions" ng-controller="GridController"></div>

Ronald91 · Accepted Answer · 2014-05-28 19:16:47Z

1

You need to return a promise for the grid to populate, change svc.query() to

$scope.myData={};
 SERVICE.query()
            .$promise.then(function(data) {
          $scope.myData=data;

            }, function() {
                //TODO:Handle Error
            });

answered May 28, 2014 at 19:16

Ronald91

1,7861 gold badge15 silver badges23 bronze badges

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

3 Comments

bolovan Over a year ago

Changed the code to svc.query().$promise.then(function(data) { $scope.myData = data; }, function() {alert('failed');}); But I get the same behavior, still no data populated.

Ronald91 Over a year ago

Hmm, can you create a plunker? With your data mocked out instead of a true service call?

Mihai Over a year ago

the grid has the data in but i thing the way the odata is represented is the problem. The nggrid scope is having data but is not able to acces it.

Mihai · Accepted Answer · 2014-05-29 12:06:33Z

0

Please edit the markup html like this.

<body  ng-app="myModule">
<div ng-controller="GridController">
    <div class="gridStyle" ng-grid="gridOptions" ></div>
</div>

answered May 29, 2014 at 12:06

Mihai

5184 silver badges12 bronze badges

Collectives™ on Stack Overflow

ng-grid doesn't populate with angular $resource

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related