Siatka UI Siatka, renderuje siatkę, ale nie wyświetla danych

Question

Czego mi tu brakuje? Siatka renderuje bez błędów, pustych wierszy ... Sprawdziłem i JSON nadchodzi w porządku aż do tego punktu $scope.gridOptions.data = response['data']; Wydaje się, że jego renderowania pustą tablicę, a nie dotarcie do rzeczywistych danych ...

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

      }); 

    }]); 

dane są przekazywane do ponad $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" 
    } 
] 

Oto 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> 

Zrzut

Answer 1

I zorientowaliśmy się, i wydaje się, że mój problem był mieszaniną dwóch rzeczy.

1. Przychodzące JSON był ciągiem, nie jestem w 100% pewien, czy nie potrzebuję przekonwertować do obiektu za pomocą JSON.parse następnie przekazać go wraz z $scope.gridOptions.data ale to mógł być problem dla kodu I opublikowałem w moim pierwotnym pytaniu powyżej.

2. Po dalszych badaniach znalazłem świetny dogłębny przykład w oficjalnych dokumentach Angular UI Grid. Zgodnie z tą techniką udało mi się poprawnie odczytać dane.

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

Na przykład to sprawia, że ​​korzystanie z wartości ciągu w gridOptions.data nazywa myData która odnosi się do obiektu na swoim zakresem dopatrzyć. Więc to, co robię, to po prostu pchanie każdego rzędu po zakończeniu żądania GET.

Pełny przykład to Here przez Punklr.

Answer 2

uzyskać dostęp do niewłaściwych danych JSON z odpowiedzią (pobrana z próbki respone, tablica nie jest w nazwie „dane”). Twoja odpowiedź ma no-name tablicę z danymi w kodzie zrobić:

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

Powinno być:

$scope.gridOptions.data = response; 

Answer 3

Można zmienić fieldId takiego:

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