Таблицы данных заполнены на AngularJs 1 $ http.get: «В таблице нет данных»

Question

Я пытаюсь заполнить таблицы данных из API, используя angularjs один, но проблема в том, что когда я загружаю страницу, таблица заполняется, но внизу появляется сообщение «Нет данных, доступных в таблице», и если Я пытаюсь отсортировать, изменить фильтр nb. of show все данные исчезли и отображается только «Нет данных, доступных в таблице».

HTML

<table id="example" ng-if="controls" datatable="ng" 
       class="table table-bordered bordered table-striped table-condensed datatable"
       ui-jq="dataTable"
       ui-options="dataTableOpt" >
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start Date</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="control in controls">
            <td>@{{control.train}}</td>
            <td>@{{control.time}}</td>
            <td>@{{control.location}}</td>
            <td>@{{control.case}}</td>
            <td>@{{control.quantity}}</td>
        </tr>
    </tbody>
</table> 

Служба

(function () {
  var app = angular.module('mainApp');

  app.service('MyService', ['$http','$q', function ($http,$q) {

          this.getControls = function() {
            var def = $q.defer();

            $http.get("/api/control")
                .then(function(data) {
                    def.resolve(data);
                },function(error) {
                    def.reject(error);
                });
            return def.promise;
        }

  }]);
})();

Контроллер

(function () {

var app = angular.module('mainApp', ['ui.select2', 'ngAnimate', 'ngSanitize', 'toaster', 'ui.utils', 'ui.bootstrap']);
app.controller('ControlsController', ['$scope', '$filter', '$window', 'MyService', '$http', '$q', '$timeout', function ($scope, $filter, $window, MyService, $http, $q, $timeout) {

        $scope.controls = [];
        angular.element(document).ready(function () {
            MyService.getControls().then(function (result) {
                $scope.controls = result.data.data;
            });
        });


    }]);
})();

Я пытался выставить, ng-if, ng-show, таймаут, но он не работает. Только если я объявляю массив со всеми значениями в контроллере, то показываются строки и фильтры, поиск, работает. Это проблема, связанная с запросом http, данные загружаются после создания DOM, но я не могу найти решение.

Кто-то может мне помочь?

Answer 1

Код выполняется с помощью ui-jq = "dataTable" ui-options = "dataTableOpt" из jQuery datatables ...

Мой ответ таков:

{
    "data": [
        {
            "id": 34,
            "train": "25162",
            "time": "2020-01-23 00:00:00",
            "location": "test2 location",
            "case": "test1",
            "quantity": 1,
            "created_at": "2020-01-23 09:24:03",
            "updated_at": "2020-01-23 09:24:03"
        },
        {
            "id": 35,
            "train": "25162",
            "time": "2020-01-23 08:20:00",
            "location": "test2 location",
            "case": "test 2",
            "quantity": 1,
            "created_at": "2020-01-23 09:27:50",
            "updated_at": "2020-01-23 09:27:50"
        },
        {
            "id": 36,
            "train": "25162",
            "time": "2020-01-23 08:20:00",
            "location": "test 3 location",
            "case": "test 3",
            "quantity": 1,
            "created_at": "2020-01-23 08:30:27",
            "updated_at": "2020-01-23 08:30:27"
        }
    ]
}

Answer 2

Ваш код отлично работает для меня. Убедитесь, что данные, возвращаемые сервисом, верны. Согласно вашему коду вам нужны данные, возвращаемые службой, как показано ниже.

          data: {
            data: [{
              train: 'My Train',
              time: '19:00',
              location: 'Xyz Station',
              case: 'Case 1',
              quantity: '10'
            },{
              train: 'My Train 2',
              time: '11:00',
              location: 'Xyz2 Station',
              case: 'Case 2',
              quantity: '20'
            }]
          }

Проверьте следующий код: Я добавил тайм-аут в 3 секунды для имитации вызова веб-службы.

(function() {
  var app = angular.module('mainApp', []);
  app.service('MyService', ['$http', '$q', function($http, $q) {

    this.getControls = function() {
      var def = $q.defer();

      setTimeout(
        () => {
          def.resolve({
            data: {
              data: [{
                train: 'My Train',
                time: '19:00',
                location: 'Xyz Station',
                case: 'Case 1',
                quantity: '10'
              }]
            }
          });
          console.log('resolved');
        }, 3000);

      return def.promise;
    }

  }]);
})();

(function() {
  var app = angular.module('mainApp');
  app.controller('ControlsController', ['$scope', '$filter', '$window', 'MyService', '$http', '$q', '$timeout', function($scope, $filter, $window, MyService, $http, $q, $timeout) {

    $scope.controls = [];
    angular.element(document).ready(function() {
      MyService.getControls().then(function(result) {       
        $scope.controls = result.data.data;
      });
    });
  }]);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="mainApp">
  <div ng-controller="ControlsController">
    <table id="example" ng-if="controls" datatable="ng" class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start Date</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="control in controls">
          <td>@{{control.train}}</td>
          <td>@{{control.time}}</td>
          <td>@{{control.location}}</td>
          <td>@{{control.case}}</td>
          <td>@{{control.quantity}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>