Question

45

Get Ajax data into Angular grid

rated 0 times [ 49] [ 4] / answers: 1 / hits: 22699 / 11 Years ago, wed, february 27, 2013, 12:00:00

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.412] now!!

[13:56:11.556]  <there is data returned from console.log(getData); >

This is the js file.

// main.js

var app = angular.module('myApp', ['ngGrid']);



var getData = [];



function fetchData() {

    var mydata = [];



    $.ajax({

        url:'/url/to/hell',

        type:'GET',

        success: function(data) {



            for(i = 0, j = data.length; i < j; i++) {

                mydata[i] = data[i];

            }

            getData = mydata;

            console.log(getData);

        }

    });    

 }

fetchData();     





app.controller('MyCtrl', function($scope) {    



    console.log('now!!')

    console.log(getData)

    console.log('now!!')



    $scope.myData = getData





    $scope.gridOptions = { 

        data: 'myData',

        showGroupPanel: true

    };

});

New Js file:

// main.js

var app = angular.module('myApp', ['ngGrid']);



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

function fetchData() {

    $http({

        url:'/url/to/hell',

        type:'GET'})

        .success(function(data) {

            $scope.myData = data;       

            $scope.gridOptions = { 

                    data: 'myData',

                    showGroupPanel: true

                };              

        });         

}   

fetchData();    

});

HTML file.

<html ng-app=myApp>

        <head lang=en>

            <meta charset=utf-8>

            <title>Blank Title 3</title>  

            <link rel=stylesheet type=text/css href=http://angular-ui.github.com/ng-grid/css/ng-grid.css />

            <link rel=stylesheet type=text/css href=../static/css/style.css />

            <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js></script>

            <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js></script>

            <script type=text/javascript src=http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js></script>

            <script type=text/javascript src=../static/js/main.js></script>

        </head>



        <body ng-controller=MyCtrl>



            <div class=gridStyle ng-grid=gridOptions></div>

        </body>

    </html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

asalewisc

Add To Favorites

Follow

Total Points: 742

Total Questions: 98

Total Answers: 112

Location: Jordan

Member since Wed, Jun 17, 2020

4 Years ago

answered 11 Years ago leog · Accepted Answer

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.