UI Сетка Угловая, сетка отображает, но не отображает данные

Question

Что мне здесь не хватает? Сетка делает без ошибок, пустые строки ... Я проверил и JSON приходит в штраф до этого момента $scope.gridOptions.data = response['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); 

      }); 

    }]); 

Данные, перешли к $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" 
    } 
] 

Вот 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> 

Скриншот

Answer 1

Я понял это, и кажется, что моя проблема была смесь двух вещи.

1. Поступающий JSON была строка, я не 100% уверен, что если мне нужно, чтобы преобразовать в объект с помощью JSON.parse затем передать его на $scope.gridOptions.data но, возможно, был вопрос для кода I опубликовано в моем первоначальном вопросе выше.

2. После дополнительных исследований я нашел большой подробный пример в официальных документах с угловым пользовательским интерфейсом. Следуя этой методике, я смог правильно получить данные.

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

В примере, она использует значение строки в gridOptions.data называется myData, который относится к объекту на области, чтобы наблюдать. Так что я делаю это просто нажатие каждой строки после завершения запроса GET.

Полный пример: Here via Punklr.

Answer 2

Вы получаете неправильные данные JSON от ответа (взятые из вашего образца ответа, массив не находится в «данных»). Ваш ответ не имеет имя-массив с данными, в вашем коде вы делаете:

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

Оно должно быть:

$scope.gridOptions.data = response; 

Answer 3

Вы можете изменить fieldId так:

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