Простой ngTable с большим JSON, не показывающий никаких данных в ячейках

0

У меня большой json файл размером почти 5 МБ со следующим форматом массива. Есть около 3000 записей.

Я использую microsoft mvc 4 и угловую + ngTable для отображения этих данных в интерфейсе. Он должен быть доступен для поиска и сортировки по всем столбцам. Код на стороне сервера не принимает никаких аргументов и возвращает все 3000 записей в формате ниже.

  {
"MR": "Inact",
"EncType": null,
"ClientAlias": 111020.0,
"OrgName": "Zic",
"CharacterAlias": null,
"Account#": 30645147.0,
"MRN": null,
"PlanCode": null,
"Address": "PO Box 123456",
"City": "Richmond ",
"St": "VA",
"ZIP": 23298.0,
"ContactName": "Jonny J",
"Fax": "(111) 111-1111",
"PHONE": "pager 111-1111",
"CriticalValueNotification": null,
"ClientPracticeTesting": null,
"Doctor": "John Smith",
"BeginDate": 36395.0,
"medBeginDate": null
  }

Файл javascript (app.js) содержит следующий код. У меня есть отдельные файлы для представлений, как показано в угловом коде ниже.

Для удобства понимания вопроса я поставил все в одном фрагменте ниже.

 var flexTable = angular.module("flexTable", ["ngRoute", "ngTable", "ngResource"]);

flexTable.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/about', {
        templateUrl: '../../about.html',
        controller: 'tableController'
    })
    .when('/contact', {
        templateUrl: '../../contact.html',
        controller: 'tableController'
    })
    .when('/', {
        templateUrl: '../../table.html',
        controller: 'tableController'
    })
    .when('/table', {
        templateUrl: '../../table.html',
        controller: 'tableController'
    })
    .otherwise({
        redirectTo: '/table'
    });


}]);

flexTable.controller('tableController',['$scope', '$resource' ,'ngTableParams', function ($scope, $resource,ngTableParams) {
    var data = '';
    var api = $resource("/Home/GetData")
    $scope.tableParams = new ngTableParams({}, {
    getData: function (params) {



        var varApiGet = api.get(params.url()).$promise.then(function (data) {
            params.total(data.inlineCount);
            return data.results;
        });
        return varApiGet;
    }
});
}]);

Страница html выглядит следующим образом

  <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

  <!DOCTYPE html>

  <html>
  <head runat="server">
      <meta name="viewport" content="width=device-width" />
      <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      <link href="../../Assets/css/justified-nav.css" rel="stylesheet" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
      <link href="../../Assets/css/ng-table.min.css" rel="stylesheet" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
          <script src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-sanitize.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-resource.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-route.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.js"></script>
          <script src="../../Assets/js/lib/ng-table.min.js"></script>
          <script src="../../Assets/js/app.js"></script>


  </head>
  <body>
      <div class="container" >
          <!-- The justified navigation menu is meant for single line per list item.
             Multiple lines will require custom code not provided by Bootstrap. -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#navbar">Default</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </nav>

          <div class="jumbotron">
        <h1>Instructions stuff!</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, 
            ut fermentum massa justo sit amet.</p>
        <!--<p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>-->
    </div>

    <div class="container" ng-controller="tableController">
        <div ng-view>
<div class="row">


    <table ng-table="tableParams" class="table">
        <tr ng-repeat="row in $data track by $index">
            <td title="'EncType'">
                {{row.EncType}}
            </td>
            <td title="'ClientAlias'">
                {{row.ClientAlias}}
            </td>
            <td title="'OrgName'">
                {{row.OrgName}}
            </td>
            <td title="'CharacterAlias'">
                {{row.CharacterAlias}}
            </td>
            <td title="'AddressCity'">
                {{row.AddressCity}}
            </td>
            <td title="'St'">
                {{row.St}}
            </td>
            <td title="'ZIP'">
                {{row.ZIP}}
            </td>
            <td title="'ContactName'">
                {{row.ContactName}}
            </td>
            <td title="'Fax'">
                {{row.Fax}}
            </td>
            <td title="'PHONE'">
                {{row.PHONE}}
            </td>
            <td title="'CriticalValueNotification'">
                {{row.CriticalValueNotification}}
            </td>
            <td title="'Doctor'">
                {{row.Doctor}}
            </td>
        </tr>
    </table>
</div>
        </div>

    </div>

</div>
      <footer class="footer">
          <p>&copy; 2015 Company, Inc.</p>
      </footer>

      </div><!--container-->
  </body>
  </html>

Когда у меня есть данные, жестко закодированные в функции контроллера javascript, таблица отлично отображается без функции поиска и сортировки. Когда я получаю данные через вызов ajax, как показано в коде, он не отображает данные. только заголовок таблицы.

Я могу ответить на любые вопросы, которые у каждого есть об этом.

Спасибо, П.п.

Любая помощь оценивается.

РЕДАКТИРОВАТЬ

Вот код контроллера, который работал для меня. Я также добавил дополнительный код для сортировки и фильтров.

flexTable.controller('tableController', ['$scope', '$http', 'ngTableParams', '$filter', '$log'
   , function ($scope, $http, ngTableParams, $filter, $log) { //


   $http.get('/Home/GetData')
        .success(function (data, status) {
            $scope.data = data;
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                sorting: {
                    OrganizationName: 'asc'     // initial sorting
                }
            }
                , {
                    total: $scope.data.length, // length of data
                    getData: function ($defer, params) {
                        // use build-in angular filter
                        var filterData = params.filter() ?
                                            $filter('filter')($scope.data, params.filter()) :
                                            $scope.data;
                        var orderedData = params.sorting() ?
                                            $filter('orderBy')(filterData, params.orderBy()) :
                                            filterData;

                        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                }
             );


        });
}]);
Теги:
asp.net-mvc-4
ngtable

1 ответ

0
Лучший ответ

Вы можете использовать $http вместо $resource. Данные отклика будут в data свойстве вашего ответа. Попробуйте следующее:

 $scope.tableParams = new ngTableParams({}, {
   getData: function(params) {
     var varApiGet = $http.get(params.url()).then(function(response) {
       var data = response.data;
       params.total(data.inlineCount);
       return data.results;
     });
     return varApiGet;
   }
 });

редактировать

Вот рабочая скрипка. Я смоделировал ответ как массив с одной записью (той, которую вы опубликовали в вопросе). Убедитесь, что ваши данные ответа находятся в правильном формате.

Поделиться
  • 0
    Теперь я получаю следующую ошибку. TypeError: Невозможно прочитать свойство 'inlineCount' неопределенного в app.js: 49 в angular.js: 15757 в m. $ Eval (angular.js: 17025) в m. $ Digest (angular.js: 16841) в m. $ применить (angular.js: 17133) на g (angular.js: 11454) на x (angular.js: 11652) на XMLHttpRequest.v.onload (angular.js: 11593)
  • 0
    извините, когда я попробовал ваш код, я использовал $ http вместо $ resource, и результат не тот же. Не могли бы вы опубликовать свой console.log(reposnse) или в своем коде console.log(data) ?
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню