UI Grid Angular, grid displays but does not display data

Question

What am I missing here? The grid displays error-free, empty lines ... I checked, and JSON comes up to this point $scope.gridOptions.data = response['data']; It seems like it shows an empty array and never gets into the actual data ...

  app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { $scope.myData = []; $scope.loading = true; $scope.gridOptions = { enableSorting: true, columnDefs: [ { name: 'Id', field: 'PK_Inspection' }, { name: 'Employee Id', field: 'EmployeeId' }, { name: 'Employee Name', field: 'EmployeeName' }, { name: 'Equipment Id', field: 'EquipmentId' }, { name: 'Equipment Name', field: 'EquipmentName' }, { name: 'Sequence', field: 'SequenceName' }, { name: 'Details', field: 'SequenceDetails' }, { name: 'Type', field: 'SequenceTypeName' }, { name: 'Shift', field: 'ShiftName' }, { name: 'Status', field: 'StatusName' } ], data:[] }; $http.get('/Home/GetAllData') .then(function (response) { $scope.gridOptions.data = response['data']; }) .catch(function (err) { $scope.loading = false; console.log("Error Receiving Data."); }) .finally(function () { $scope.loading = false; console.log($scope.gridOptions.data); }); }]); 

Passing data to $scope.gridOptions.data :

 [ { "PK_Inspection": 1, "EmployeeId": "4433112", "EmployeeName": "", "EquipmentId": "1122113", "EquipmentName": "", "SequenceName": "UNIT 1", "SequenceDetails": "Bent, Dented, Broken, Torn or Deformed Parts.", "SequenceTypeName": "Visual Inspection", "ShiftName": "Day", "StatusName": "OK" }, { "PK_Inspection": 2, "EmployeeId": "4433112", "EmployeeName": "", "EquipmentId": "1122113", "EquipmentName": "", "SequenceName": "UNIT 2", "SequenceDetails": "Charge, Water Levels, Vent Caps in place, Power Disconnect works.", "SequenceTypeName": "Visual Inspection", "ShiftName": "Day", "StatusName": "OK" } ] 

Here's the HTML:

 <div ng-controller="MainCtrl"> <i class="fa fa-spinner fa-spin text-center" ng-show="loading"></i> <div id="mainGrid" ui-grid="gridOptions" ui-grid-edit class="myGrid"></div> </div> 

Screenshot

Answer 1

I realized this, and it seems that my problem was a mixture of two things.

• The incoming JSON was a string, I'm not 100% sure if I needed to convert the object to JSON.parse and then pass it to $scope.gridOptions.data , but that could be a problem for the code I posted in my original question above.

• After further research, I found a great detailed example in the official Angular UI Grid docs. Following this technique, I was able to get the data correctly.

   var rowCount = 0; var i = 0; $scope.refreshData = function () { $scope.loading = true; $scope.myData = []; $http.get('/Home/GetAllData') .success(function (response) { var jsonObj = JSON.parse(response); rowCount = jsonObj.length; jsonObj.forEach(function (row) { row.id = i; i++; $scope.myData.push(row); }); $scope.loading = false; }) .error(function() { $scope.loading = false; console.log("Error retrieving data."); }); }; 

This example uses a string value in gridOptions.data called myData , which refers to an object in your scope for viewing. So what I am doing is simply pressing each line after the completion of the GET request.

Full example here via Punklr.

Answer 2

this grid does not work at all

Answer 3

You are accessing incorrect JSON data from the response (taken from your sample response, the array is not in the data name). In your answer there is no array of data names in your code:

 $scope.gridOptions.data = response['data']; 

It should be:

 $scope.gridOptions.data = response; 

Answer 4

You can change the fieldId as follows:

 $scope.gridOptions = { enableSorting: true, columnDefs: [ { name: 'Id', field: 'PK_Inspection' }, { name: 'Employee Id', field: 'employeeId' }, { name: 'Employee Name', field: 'employeeName' }, { name: 'Equipment Id', field: 'equipmentId' }, { name: 'Equipment Name', field: 'equipmentName' }, { name: 'Sequence', field: 'sequenceName' }, { name: 'Details', field: 'sequenceDetails' }, { name: 'Type', field: 'sequenceTypeName' }, { name: 'Shift', field: 'shiftName' }, { name: 'Status', field: 'statusName' } ], data:[] };