显示来自 JSON 的数据的替代方法

Question

我正在开发跨平台 angularjs 移动应用程序。其中需要显示一些数据。现在我将该数据存储为 json 文件。此 json 文件包含近 2500 种产品。下面的代码工作得很好。现在的问题是，当我在移动设备中部署以下代码时，它确实需要 12 - 14 秒来遍历 json 并显示数据。

json 文件的大小不是问题。起初 json 文件是 1.2 MB，我删除了不需要的字段并将其减少到 320kb 并缩小了它。但是该过程的迭代时间仍然相同。

我打算在点击每个字段时显示完整的产品详细信息，虽然它会工作正常但是当用户在查看单个产品详细信息后点击返回并转到主列表页面时，需要 12 -每次14秒，这是不可接受的。

有人可以提出一个更好的想法，而不是显示这么多数据吗？我考虑过将整个 json 转换为 SQLite 数据库文件并通过查询访问它。

我不是高级 angularjs 程序员（仍在学习），这就是为什么我把所有东西都摆在我面前。一些好的帮助将不胜感激。

编辑。

如果我打算通过添加 ng-model 添加文本框并显示过滤后的数据怎么办？每当我在文本框中键入文本时，它都会遍历整个 2500 条记录。说到手机，那就是死路一条。

JSON 文件。 [product.json]

[{"ProductCode":"000001","Description":"Product1","UOMml":"100","ShopAfterST":"150"},
....
....
....
}]

我的控制器。

  myAppControllers.controller("ProductListCtrl", function($scope, $http) {

  $http.get('json/product.json').success (function(data){
                $scope.ProdList = data;
            });

});

我的模板html.

<div ng-controller="ProductListCtrl">
    <div ng-repeat="item in liquorProdList | orderBy:'Description'" >
        <p > {{item.Description}} </p>
    </div>  
</div>

Answer 1

仅显示所需的有限记录。

可以在这里找到一些类似的主题，希望对您有所帮助。

How to improve performance of ngRepeat over a huge dataset (angular.js)?

AngularJs with large JSON array

Answer 2

我发现 AngularJS 不能很好地处理 ng-repeat 中的大量数据。我发现使用分页控件可以显着提高性能。这是一个可能有帮助的： https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

周围还有一些，这只是我自己用过的。

Answer 3

试试这个。创建用于返回列表的服务。该服务应缓存最新的过滤列表（即根据用户在文本框中键入的任何内容进行过滤）。服务 returns 就是这个缓存列表，如果它存在的话。如果没有缓存列表，则从 json 文件加载。每当筛选列表发生更改或服务刚刚从 json 文件加载完毕时，请记住更新缓存列表。

通过在控制器中公开此服务，您可以将 ngRepeat 绑定到服务返回的列表，缓存的列表将始终被首先考虑（因此它不会总是花费 10 多秒来加载列表）

请注意，这是一个简单的解决方案，假设 json 文件是静态的，因此永远不会更改。

显示来自 JSON 的数据的替代方法

Alternative for displaying data from a JSON

json

angularjs

angularjs-ng-repeat