Search code examples
angularjsangular-ui-grid

UI Grid won't display

Trying to follow the docs provided here on their website, but still not able to get it to work. I am scanning a table using AWS DynamoDB, and trying to display the information in the table within this UI grid.

My controller:

angular.module('App')
  .controller('GridCtrl', ['modelObjects', '$scope', 'dbCall', function(modelObjects, $scope, dbCall) {

    $scope.gridOptions = {
      enablesorting: true,
      columndefs: [{
        field: 'ref id'
      }, {
        field: 'group'
      }, {
        field: 'cost center'
      }, {
        field: 'cost center description',
      }, {
        field: 'recruitment firm',
        enablesorting: false
      }],
    };

    $scope.updateGrid = function(data) {
      // for (var key in data) {
      //   var item = data[key];
      //   for (var key2 in item) {
      //     console.log(item[key2]);
      //     $scope.gridOptions.data = item[key2];
      //   }
      // }
      $scope.gridOptions.data = data;
    };

    $scope.scanPosition = function() {
      var params = {};
      return dbCall('addGrid', params, $scope.check);
    };

    $scope.check = function(err, data) {
      if (err) {
        $scope.results = "Failure: Unable To Connect To Database";
        console.log(err);
      }
      else {
        $scope.results = "Success: Position Table Scanned";
        console.log(data);
        $scope.updateGrid(data);
      }
    };
    setTimeout(function() {
      $scope.scanPosition();
    }, 50);
  }]);

My View:

<!DOCTYPE html>
<html>
    <head></head>
    <body ng-app="App">
        <div class="col-lg-10 col-lg-offset-2 col-sm-9 col-sm-offset-3 col-xs-12">
            <div class="container-fluid">
                <br>
                <div class="panel panel-default" style="align: center; border:1px solid #d4d4d4;">
                    <div class="panel-heading" style="text-align: center;">
                        <h3>Grid Page</h3>
                    </div>
                </div>
                <div ui-grid="gridOptions" class="myGrid"></div>
            </div>
        </div>
    </body>
</html>

My database is working; I am able to loop and display the information in the console. It just isn't being displayed in the grid. I have no console errors. Console

Thanks in advance for any help!

Solution

  • It looks like you need to set the grid data like this:

    $scope.gridOptions.data = data.Items;

    Since data.Items is the array of objects.