Angular UI-Grid can not get data to display

Question

I've been reading the examples of Angular UI-Grid b/c we want to use it in a project. I'm following the docs and examples here on stack. But I can not get my data to display in my table. I've created this plunk based on others, simplified for what I'm doing. I'm not sure why the data will not display?? Any help is appreciated.

http://plnkr.co/edit/jOOePX4X1BliOXdG95pC?p=preview

index.html

<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div ng-controller="appController ">
    <div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="mygrid" ></div>
</div>


<script src="app.js"></script>

</body> 


</html>

app.js

var myApp =  angular.module("myApp", ['ngTouch','ui.grid', 'ui.grid.edit',  'ui.grid.rowEdit', 'ui.grid.resizeColumns'])

myApp.controller("appController", ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {


$scope.columns = [
    { name: 'colA', enableCellEdit: true},
    { name: 'colB', enableCellEdit: true },
    { name: 'colC', enableCellEdit: true },
    { name: 'colD', enableCellEdit: true },
    { name: 'colE', enableCellEdit: true },
    { name: 'colF', enableCellEdit: true }
];

$scope.gridOptions = {
    enableCellEditOnFocus: false,
    enableSorting: true,
    enableGridMenu: true,
    columnDefs: $scope.columns,
    onRegisterApi: function(gridApi){
        $scope.gridApi = gridApi;
        gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
    }
};

$scope.saveRow = function( rowEntity ) {
    // create a fake promise - normally you'd use the promise returned by $http or $resource
    console.log("record EDIT" + angular.toJson(rowEntity));
    var promise = $q.defer();
    $scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise );

    // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
    $interval( function() {
        if(rowEntity.test_status === 'Active') {
             console.log("accepting edit, b/c status is Active");
            promise.resolve();
        }else {
            console.log("rejecting edit, b/c status is Inactive");
            promise.reject();
        }
    }, 1000, 1);
};

  $http.get('data.json')
  .success(function(data) {
    console.log("data == " + angular.toJson(data));
    $scope.gridOptions.data = data;
  });
}]);

JSON Data

   [
    {
        "testA": "1","description": "test1","order": "1","test_status": "Active"
    },
    {
        "testB": "2","description": "test2","order": "2","test_status": "Active"
    },
    {
        "testC": "3","description": "test3","order": "3","test_status": "Active"
    },
    {
        "testD": "4","description": "test4","order": "4","test_status": "Inactive"
    },
    {
        "testE": "5","description": "test5","order": "5","test_status": "Active"
    }
  ]

CSS

.mygrid {
  width: 450px;
  height: 150px;
}

From the UI-Grid docs ... "UI-Grid is currently compatible with Angular versions ranging from 1.2.x to 1.4.x.". You're using Angular 1.5.2 — jbrown

Matt M Matt M · Accepted Answer · 2016-07-08T16:58:53

The reason is actually, a simple one. Your column names in your columnDefs object don't match the json you're getting back from your $http call. Change

$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];

to this:

$scope.columns = [
{ name: 'test', enableCellEdit: true},
{ name: 'description', enableCellEdit: true },
{ name: 'order', enableCellEdit: true },
{ name: 'test_status', enableCellEdit: true }
];

and make sure you change the value of the json data from "testA", "testB", "testC", etc to simply "test".

Angular UI-Grid can not get data to display

1 Answers