$http.get call returning bad data to Angular UI-Grid control

Question

This is my first ui-grid application using AngularJS and nodejs with express framework as the backend.

The API is running well and data is coming to the brower, but I´m really confused about the sequence of events and the usage of the asynchronous $http.get() call on the Angular context.

So, I need to put a grid on screen. This grid needs to load data from the API. Here is my grid object on the html page:

  <div class="tile-body" ng-controller="AdminUsersGridCtrl">
    <div id="grid" ui-grid="gridOptions" class="grid"></div>
  </div>

And here is my controller:

app.controller('AdminUsersGridCtrl', function ($scope, $http, uiGridConstants) {

    $http.get('/api/admin/user')
    .then(function (response) {

        $scope.myData = response;

        $scope.gridOptions = {
          data: 'myData',
          enableFiltering: true,
          columnDefs: [
            { field: 'firstName' },
            { field: 'lastName' },
            { field: 'jobTitle'},
            {
              field: 'email',
              filter: {
                condition: uiGridConstants.filter.ENDS_WITH,
                placeholder: 'ends with'
              }
            },
            {
              field: 'phone',
              filter: {
                condition: function(searchTerm, cellValue) {
                  var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
                  return strippedValue.indexOf(searchTerm) >= 0;
                }
              }
            },
          ]
        };
    }, 
    function (error) {
        console.log(error);
    });
  });

I´m getting errors with this sequence:

TypeError: Cannot read property 'data' of undefined
    at new <anonymous> (ui-grid.js:3130)
    at Object.invoke (angular.js:4604)
    at extend.instance (angular.js:9855)
    at nodeLinkFn (angular.js:8927)
    at angular.js:9231
    at processQueue (angular.js:15552)
    at angular.js:15568
    at Scope.$eval (angular.js:16820)
    at Scope.$digest (angular.js:16636)
    at Scope.$apply (angular.js:16928)

I can´t find out what is going on here. Where is that error message coming from?

Answer 1

You should initialize gridOptions outside the promise call.

 app.controller('AdminUsersGridCtrl', function ($scope, $http, uiGridConstants) {


        $scope.gridOptions = {
          enableFiltering: true,
          columnDefs: [
            { field: 'firstName' },
            { field: 'lastName' },
            { field: 'jobTitle'},
            {
              field: 'email',
              filter: {
                condition: uiGridConstants.filter.ENDS_WITH,
                placeholder: 'ends with'
              }
            },
            {
              field: 'phone',
              filter: {
                condition: function(searchTerm, cellValue) {
                  var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
                  return strippedValue.indexOf(searchTerm) >= 0;
                }
              }
            },
          ]
        };

     $http.get('/api/admin/user')
    .then(function (response) {
       $scope.gridOptions.data = response.data;  // Content is in the response.data
    },
    function (error) {
        console.log(error);
    });
  });