I am exploring Angular.js UI-Grid. However, I can't seem to figure out why data is ing as undefined when I am making an HTTP request in my service. It seems to work fine when I make an HTTP request from my controller. How can I make Ui-Grid work in a modular way?

HTML

<div id="grid1" ui-grid="gridOptions" class="grid"></div>

Controller

app.controller('tableCtrl', function($scope, tableService) {

    var getAllArtistData = function() {

        tableService.getArtistData().then(function(data) {
            console.log("this is controller data", data);
            $scope.gridOptions.data = data;

            $scope.gridOptions = {};

            $scope.gridOptions.columnDefs = [
                {name:'artist_id'},
                {name:'first_name'}
            ];

            });
        };
    getAllArtistData();
});

Service

app.service('tableService', function($http, $q) {

    /************************************************
    GET ARTIST DATA 
    ************************************************/
    this.getArtistData = function() {

        var defer = $q.defer();

        $http.get('../../../data/artists-lite.json')
            .success(function(response) {
                console.log("this is response", response);
                defer.resolve(response);
            })
            .error(function(err) {
                defer.reject(err);
            });

        return defer.promise;

    };
});

App.js

'use strict';

var app = angular.module('bucketfeet', ['ui.router','ui.grid', 'ngAnimate']);

app.run(function($state, $rootScope) {
    $rootScope.$state = $state;
});

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider
    .otherwise('/');

    $stateProvider
    .state('stats', 
        {
            url: '/stats',
            templateUrl: './js/views/statsTmpl.html'
        })
    .state('table', 
        {
            url: '/table',
            templateUrl: './js/views/tableTmpl.html',
            controller: 'tableCtrl'
        });

});

I am exploring Angular.js UI-Grid. However, I can't seem to figure out why data is ing as undefined when I am making an HTTP request in my service. It seems to work fine when I make an HTTP request from my controller. How can I make Ui-Grid work in a modular way?

HTML

<div id="grid1" ui-grid="gridOptions" class="grid"></div>

Controller

app.controller('tableCtrl', function($scope, tableService) {

    var getAllArtistData = function() {

        tableService.getArtistData().then(function(data) {
            console.log("this is controller data", data);
            $scope.gridOptions.data = data;

            $scope.gridOptions = {};

            $scope.gridOptions.columnDefs = [
                {name:'artist_id'},
                {name:'first_name'}
            ];

            });
        };
    getAllArtistData();
});

Service

app.service('tableService', function($http, $q) {

    /************************************************
    GET ARTIST DATA 
    ************************************************/
    this.getArtistData = function() {

        var defer = $q.defer();

        $http.get('../../../data/artists-lite.json')
            .success(function(response) {
                console.log("this is response", response);
                defer.resolve(response);
            })
            .error(function(err) {
                defer.reject(err);
            });

        return defer.promise;

    };
});

App.js

'use strict';

var app = angular.module('bucketfeet', ['ui.router','ui.grid', 'ngAnimate']);

app.run(function($state, $rootScope) {
    $rootScope.$state = $state;
});

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider
    .otherwise('/');

    $stateProvider
    .state('stats', 
        {
            url: '/stats',
            templateUrl: './js/views/statsTmpl.html'
        })
    .state('table', 
        {
            url: '/table',
            templateUrl: './js/views/tableTmpl.html',
            controller: 'tableCtrl'
        });

});

• javascript
• json
• angularjs
• ng-grid
• angular-ui-grid

Share Improve this question Follow edited Oct 5, 2015 at 4:27 Mihir Patel asked Oct 5, 2015 at 4:13 Mihir PatelMihir Patel 2,40233 gold badges2626 silver badges3838 bronze badges 2

• $scope.gridOptions1 is undefined – Rahil Wazir Commented Oct 5, 2015 at 4:15
• Here is the working pen of your code codepen.io/anon/pen/dYvEym. The initial reasons for your problem may be you are missing proper version of ui-grid or its dependancy. Have a look at all files in code pen. – J-D Commented Oct 5, 2015 at 5:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In your controller you should initialize your gridOptions before using it. Even better, try extracting setting up of this variable to controller scope, leave filling only the data in asynchronous method:

app.controller('tableCtrl', function($scope, tableService) {

    // Initialize gridOptions with all the properties, except for data
    $scope.gridOptions = {};
    $scope.gridOptions.columnDefs = [
        {name:'artist_id'},
        {name:'first_name'}
    ];
    $scope.gridOptions.data = [];

    var getAllArtistData = function() {

        tableService.getArtistData().then(function(data) {
            console.log("this is controller data", data);

            // fill only data in asynchronous callback
            $scope.gridOptions.data = data;
        });
    };
    getAllArtistData();
});

Method tableService.getArtistData() is executed asynchronously and the callback for this method is only executed when the data is retrieved from server. This can happen in couple of milliseconds, it can happen in minutes. The rendering of the grid needs to happen before the callback is executed, and it lacks the metadata information of how to render the grid. That is why I suggest initializing grid metadata before launching the asynchronous call, and inside the callback setting only the data.