UI Grid Angular, grid renders but doesn't display data

Question

What am I missing here? The grid renders with no errors, blank rows... I checked and JSON is coming in fine up to this point $scope.gridOptions.data = response['data']; It seems like its rendering the empty array and never getting to 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);

            });

    }]);

Data being passed over 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

Eurasian

Can you provide an example of the response data? – Brand

@Brand I updated the question with the response data. – Eurasian

Answer 1

I figured it out, and it appears that my problem was a mixture of two things.

1. The incoming JSON was a string, I'm not 100% sure if I needed to convert to an object by using JSON.parse then pass it along to the $scope.gridOptions.data but that could've been the issue for the code I posted in my original question above.

2. After more research I found a great in-depth example in the official Angular UI Grid docs. Following this technique i was able to get the data rendered 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.");
           });
    };
   

In the example it makes use of a string value in gridOptions.data called myData which refers to an object on your scope to watch. So what I'm doing is just pushing each row once the GET request completes.

The full example is Here via Punklr.

Eurasian

Answer 2

For me below code worked, once i change data i call below code

if ($scope.gridApi ) {
       $scope.$timeout(() => {
          $scope.gridApi.core.handleWindowResize();
          $scope.gridApi.grid.refresh();
       }, 10);
}

Megawatt

Answer 3

You access the wrong JSON data from response (taken from your respone sample, array is not in 'data' name). Your response has no-name array with data, in your code you do:

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

It should be:

$scope.gridOptions.data = response;

Blotchy

Actually i'm accessing the data property inside the response object. Response is an object which consists of data property and others. The JSON is in data. If i don't use response.data or response['data'] then i'm simply passing the full object. – Eurasian

When using the then method of the response promise (as OP is doing), the argument to the callback function is the entire response object. See the "Returns" section here ~ docs.angularjs.org/api/ng/service/$http#usage – Brand

Answer 4

You can change the fieldId like this:

$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:[]
};

Cumin