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

enter image description here

Can you provide an example of the response data?

Phil
– Phil

2015-02-11 06:10:39 +00:00
Commented Feb 11, 2015 at 6:10 — Phil
– Phil, Commented Feb 11, 2015 at 6:10
@Phil I updated the question with the response data.

Dayan
– Dayan

2015-02-11 12:42:45 +00:00
Commented Feb 11, 2015 at 12:42 — Dayan
– Dayan, Commented Feb 11, 2015 at 12:42

Bill the Lizard · Accepted Answer · 2015-02-12 22:52:08Z

I figured it out, and it appears 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 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.

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.

Diwakar · Accepted Answer · 2020-01-09 05:51:28Z

0

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);
}

answered Jan 9, 2020 at 5:51

Diwakar

1

Comments

Michał Wiatr · Accepted Answer · 2015-02-11 13:35:15Z

-1

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;

answered Feb 11, 2015 at 13:35

Michał Wiatr

4814 silver badges21 bronze badges

2 Comments

Dayan Over a year ago

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.

Phil Over a year ago

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

Nahuel Ianni · Accepted Answer · 2015-07-03 08:17:27Z

-1

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

edited Jul 3, 2015 at 8:17

Nahuel Ianni

3,1854 gold badges25 silver badges30 bronze badges

answered Jul 3, 2015 at 7:36

Govardhan Reddy Renati

11 bronze badge

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related