使用AngularJS在浏览器上显示的巨大数据，所有的浏览器都变得很疯狂 [英] Huge data to show on browser using AngularJS, all the browsers are getting crased
问题描述
我的任务是在UI上显示巨大的数据。 DataBase返回大约25组，5组大约有10000行，其余大约有1000行，所以总共大约80k行。我在演示应用程序中尝试它，我已经创建了非常基本的WebApi，其中我只是从DataBase获取数据并使用SqlDaraReader填充我的类（参见下面的代码）。
My task is to show Huge data on UI. DataBase is returning around 25 sets and 5 sets are having around 10000 rows and rest are having around 1000 rows, so total around 80k rows. I was trying it in demo application where I've created very basic WebApi, in which I am just getting data from DataBase and filling my class using SqlDaraReader(See below code).
public HttpResponseMessage Get()
{
HugeDataSetClass obj = new HugeDataSetClass();
string connectionString = string.Empty;
connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
string jsonResult;
using (SqlConnection connection = new SqlConnection(connectionString))
{
connection.Open();
using (SqlCommand command = new SqlCommand("sp_testHugeData", connection))
{
command.CommandType = CommandType.StoredProcedure;
using (SqlDataReader reader = command.ExecuteReader())
{
obj.obj1 = new BindingList<HugeDataModel>();
while (reader.Read())
{
HugeDataModel obj111 = new HugeDataModel();
obj111.id = reader.GetInt32(0);
obj111.name1 = reader.GetString(1); obj111.name2 = reader.GetString(2); obj111.name3 = reader.GetString(3);
...
...
obj111.name89 = reader.GetString(89); obj111.name90 = reader.GetString(90);
obj.obj1.Add(obj111);
}
...
...
reader.NextResult();
obj.obj29 = new BindingList<HugeDataModel>();
while (reader.Read())
{
HugeDataModel obj1 = new HugeDataModel();
obj1.id = reader.GetInt32(0);
obj1.name1 = reader.GetString(1); obj1.name2 = reader.GetString(2); obj1.name3 = reader.GetString(3);
...
...
obj1.name89 = reader.GetString(89); obj1.name90 = reader.GetString(90);
obj.obj29.Add(obj1);
}
}
}
}
jsonResult = Newtonsoft.Json.JsonConvert.SerializeObject(obj);
var response = Request.CreateResponse(HttpStatusCode.OK);
response.Content = new StringContent(jsonResult, Encoding.UTF8, "application/json");
return response;
}
在上面的代码中，我在序列化obj时遇到OutOfMemory异常。如果我评论这个序列化代码和响应事物并返回HugeDataSetClass的对象然后在浏览器上（我已经尝试了所有可能的浏览器）我得到数据但在显示之前浏览器崩溃了。下面是我的UI（AngularJs）代码：
In above code I am getting "OutOfMemory" exception while Serializing obj. If I comment this serialization code and response thing and return object of HugeDataSetClass then on browser(I've tried all the possible browsers) I get the data but before displaying it browser gets crashed. Below is my UI(AngularJs) code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page To Display Huge Data</title>
<style type="text/css">
div {
width: 100%;
margin: 5px;
}
table {
border: 2px solid red;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("hugeDataApp", []);
app.controller("hugeDataController", function ($scope, $http) {
$scope.GetHugeData = function () {
$http.get("http://localhost:60533/api/HugeData").then(
function (response) {
$scope.HugeDataSets = response.data;
}
);
};
});
</script>
</head>
<body ng-app="hugeDataApp" ng-controller="hugeDataController">
<input type="button" id="btnLoad" value="Load" ng-click="GetHugeData()" />
<br />
<div id="div1">
<table>
<tr ng-repeat="x in HugeDataSets.obj1">
<td>{{x.id}}</td>
<td>{{x.name1}}</td>
<td>{{x.name2}}</td>
<td>{{x.name3}}</td>
...
...
<td>{{x.name89}}</td>
<td>{{x.name90}}</td>
</tr>
</table>
</div>
<div id="div29" style="width: 100%">
<table>
<tr ng-repeat="x in HugeDataSets.obj29">
<td>{{x.id}}</td>
<td>{{x.name1}}</td>
<td>{{x.name2}}</td>
<td>{{x.name3}}</td>
...
...
<td>{{x.name89}}</td>
<td>{{x.name90}}</td>
</tr>
</table>
</div>
</body>
</html>
因此，如果我显示少量数据说1000行（最坏情况）并保留客户端的原始大集以进一步计算它会起作用吗？并且假设我可以在客户端保存大量数据，但它不允许我在WebApi中序列化它，或者我不应该将它序列化？
So, if I show small amount of data say 1000 rows(worst case) and keep the original huge set at client side for further computation, will it work? And suppose I can keep huge data at client side but it's not allowing me to serialize it in WebApi, or I should not at all serialize it?
推荐答案
范围，
http）{
scope.GetHugeData = function（）{
scope.GetHugeData = function () {
这篇关于使用AngularJS在浏览器上显示的巨大数据，所有的浏览器都变得很疯狂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
