如何使用 Angular JS 和 JSON 对一百万行数据进行实时搜索？答案

【问题标题】：How to do a live search on a million rows of data using angular JS and JSON?如何使用 Angular JS 和 JSON 对一百万行数据进行实时搜索？
【发布时间】：2018-07-14 06:52:48
【问题描述】：

我一直在使用 angularJS 和 JSON。这就是我将数据放入视图的方式。

@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    serializer.MaxJsonLength = Int32.MaxValue;
    var jsonModel = serializer.Serialize(Model.PartsCollection);
}
<script>
 var app = angular.module('myApp', []);
    app.controller('partsController', function ($scope) {
        $scope.parts = @Html.Raw(jsonModel);
</script>

我正在尝试使用 angularJS 中的过滤器指令过滤 json 中的数据

<div ng-app="myApp" ng-controller="partsController">
  Enter part Number: <input type="text" ng-model="mypart" />

    <ul>
        <li ng-repeat="x in parts | filter:mypart">
            {{x}}
        </li>
    </ul>
</div>

当我尝试运行此程序时，CPU 和内存利用率几乎达到 100%，但没有任何反应。如果有人对此有任何想法，那将是惊人的。谢谢。

【问题讨论】：

标签： javascript html angularjs json asp.net-mvc

【解决方案1】：

尝试使用分页，将数据拆分为页面，并让服务为您使用 ng-change 对输入值进行过滤。

显示更多的 1M 行是相当多的，所以会有很长的滚动到页面的末尾。

当您使用分页时，您可以减少 DOM 中存在的行数

【讨论】：

我不需要显示整个 100 万行。当用户在文本字段中键入时，他应该在文本框底部获得所有相似的数据。
但问题是当输入项为空白时，您会显示所有行...这就是为什么您的 CPU 增加如此之多...

【解决方案2】：

超过 100 万个数据项的迭代可能是一项繁重的任务...有明显的方法可以通过在服务器上或什至在您的 sql 查询中进行排序来减少客户端资源（如果您查询 db）

因为你专门问过angular，所以解决方法如下。

假设一个示例 JSON 如下所示：

{
   Part_Name: "Cog",
   Part_Number: 1
}

那么您的ng-repeat 应该如下所示：

<li ng-repeat="x in parts | filter:{Part_Number: mypart}">
   {{x}}
</li>

【讨论】：

【解决方案3】：

使用输入标签发送带有查询参数的后端请求。

【讨论】：