Cannot set property 'grid' of undefined

Question

I'm new to angular and ng-grid, I am calling a simple static json file but the grid is not showing at all, the message I'm getting is:

Cannot set property 'grid' of undefined

Can anyone help?

My code looks like this

angular.module('healthyLivingApp')
  .controller('SubscribersCtrl', function ($scope,$http) {
    $http.get('http://localhost:9000/subscribers.json').success(function(data){
        $scope.subscribers = data;
    });
     $scope.gridOptions = {
        data:'subscribers'
    }

  });

app.js

.module('healthyLivingApp', [
'ngAnimate',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngGrid',
    'ui.bootstrap'
  ])

HTML

<h1>Subscribers</h1>
<div class="gridStyles" ng-grid="gridOptions">
</div>

I'm using bower, Angular "1.3.12", ng-grid " "2.0.14"", jQuery " 2.1.3"

This works for me, what order are your angular/nggrid and jquery scripts loaded in your html? Also, what exactly does subscribers.json return? See: plnkr.co/edit/ersNjlKz4xjlmoIGgUli?p=preview — Nicholas Hirras
returns a simple object like this [ {"no":"1","name":"Betty", "loyalty": 3,"joinDate":"3/5/10", "userType":"Free"}, {"no":"2","name":"John", "loyalty": 5,"joinDate":"3/5/05", "userType":"Premium"}, {"no":"3","name":"Peter", "loyalty": 6,"joinDate":"3/5/10", "userType":"Free"} ] — Rolando
the css file was missing, thanks a lot for that plunker, however the console still showing me that error, i have no idea what it is — Rolando

Rebornix Rebornix · Accepted Answer · 2015-02-09T03:05:01

There is an async task in your controller

$http.get('http://localhost:9000/subscribers.json').success(function(data){
    $scope.subscribers = data;
});

When your controller finishes initialization and Angular starts to render DOM, this async hasn't finished, which means $scope.subscribers is still undefined. You already claim ng-grid should read data from subscribers

$scope.gridOptions = {
    data:'subscribers'
}

So, a proper solution is, define $scope.subscribers at the top of your controller

angular.module('healthyLivingApp')
  .controller('SubscribersCtrl', function ($scope,$http) {
      $scope.subscribers = [];
      $http.get('http://localhost:9000/subscribers.json').success(function(data){
        $scope.subscribers = data;
      });
      $scope.gridOptions = {
        data:'subscribers'
      };
  });

Cannot set property 'grid' of undefined

2 Answers