Get Ajax data into Angular grid

Question

Using Angular Grid, I get the ajax get data in console.log. But an empty grid.

The console log reads:

[13:56:11.411] now!!
[13:56:11.412] []
[13:56:11.4         


        

Answer 1

Your controller is probably accessing the getData array before the .success is finished. You're accessing the variable right away, outside of a promise function, which is initialized to an empty array.

Why don't you try putting the fetchData function into the controller (for now) and storing the getData directly into $scope.myData in the .success? Maybe even initialize the grid right there too? Not sure if you can do that but if you could it would look like this:

app.controller('MyCtrl', function($scope, $http) {  
$scope.myData = '';
$scope.gridOptions = { showGroupPanel: true, data: 'myData' };
function fetchData() {
    setTimeout(function(){  
        $http({
            url:'/url/to/hell',
            type:'GET'})
            .success(function(data) {
                $scope.myData = data;   
                if (!$scope.$$phase) {
                    $scope.$apply();
                }                   
            });         
    }, 3000);       
}   
fetchData();    
});

(source for some of the $scope apply stuff: https://github.com/angular-ui/ng-grid/issues/39)

Also not sure why you're mixing in jQuery .ajax with angular code ($http will do that), and why none of your javascript has a semicolon.