$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?

what's inside the response object ?

Searching
– Searching

2017-01-11 23:35:16 +00:00
Commented Jan 11, 2017 at 23:35 — Searching
– Searching, Commented Jan 11, 2017 at 23:35

Mendes · Accepted Answer · 2017-01-12 14:33:36Z

3

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

edited Jan 12, 2017 at 14:33

Mendes

18.7k40 gold badges167 silver badges284 bronze badges

answered Jan 11, 2017 at 23:30

Kalyan

1,2001 gold badge11 silver badges23 bronze badges

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

2 Comments

Mendes Over a year ago

Now at least it is loding the table headers with the correct names, but I´m not getting the data and showing a different error: newRawData.forEach is not a function...

Mendes Over a year ago

Got the error. The returned content is in the response.data field, not in the response field. Corrected in your answer. Thanks for helping.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related