Javascript 带有大JSON的简单ngTable不在单元格中显示任何数据
我有一个大的json文件,大小接近5MB,采用以下数组格式。 大约有3000条记录 我正在使用MicrosoftMVC4和angular+ngTable在前端显示这些数据。它需要在所有列上都可以搜索和排序。 服务器端代码不接受任何参数,并以下面的格式返回所有3000条记录Javascript 带有大JSON的简单ngTable不在单元格中显示任何数据,javascript,angularjs,json,asp.net-mvc-4,ngtable,Javascript,Angularjs,Json,Asp.net Mvc 4,Ngtable,我有一个大的json文件,大小接近5MB,采用以下数组格式。 大约有3000条记录 我正在使用MicrosoftMVC4和angular+ngTable在前端显示这些数据。它需要在所有列上都可以搜索和排序。 服务器端代码不接受任何参数,并以下面的格式返回所有3000条记录 { "MR": "Inact", "EncType": null, "ClientAlias": 111020.0, "OrgName": "Zic", "CharacterAlias": null, "Account#"
{
"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>© 2015 Company, Inc.</p>
</footer>
</div><!--container-->
</body>
</html>
您可以使用
$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;
}
});
编辑
他是一把小提琴。我将响应模拟为一个包含一个条目的数组(您在问题中发布的条目)。确保您的响应数据格式正确。我现在收到以下错误。TypeError:无法在XMLHttpRequest.v.onload(angular.js:11593)下读取未定义的在app.js:49在angular.js:15757在m.$eval(angular.js:17025)在m.$digest(angular.js:16841)在m.$apply(angular.js:17133)在g(angular.js:11454)在x(angular.js:11652)在XMLHttpRequest.v.onload(angular哦,对不起,当我尝试您的代码时,我使用了$http而不是$resource,结果不一样。您可以发布您的
console.log(resosnse)
吗?或者在您的代码console.log(data)
中发布吗?console.log(data)提供了一个带有以下{0:[,1:,2:“↵", 3: " ", 4: " ", 5: "{", 6: " ", 7: "↵,8:,9:,10:,11:,12:,13:,14:,R,15:,16:,17:,18:,19:,P,20:,T,21:,22:,23:……这似乎是由对象中每个字母分隔的数据。我认为$resource
不适合您的情况。它用于管理诸如“文章”、“用户”等其他资源,而不是数据数组。您是否特别需要使用$resource
?如果不需要,您应该使用$http
或其他方法。
$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;
}
});