替代显示来自JSON的数据

时间:2015-01-09 05:59:54

标签: json angularjs angularjs-ng-repeat

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

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

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

有人可以建议一个更好的想法,显示这么多数据并不费时吗?我想过将整个json转换为SQLite db文件并通过查询访问它。

我不是一个先进的angularjs程序员(仍在学习),这就是为什么我躺在我面前的一切。非常感谢一些好的帮助。

修改

如果iam计划添加文本框并通过添加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>

3 个答案:

答案 0 :(得分:1)

仅显示所需的有限记录。

可以在这里找到一些类似的主题并希望它会有所帮助。

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

AngularJs with large JSON array

答案 1 :(得分:0)

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

周围还有其他几个,这只是我自己使用的那个。

答案 2 :(得分:0)

试试这个。创建用于返回列表的服务。该服务应该缓存最新过滤的列表(即,通过用户在文本框中键入的任何内容进行过滤)。正是这个缓存的列表,服务返回(如果存在)。如果没有缓存列表,则从json文件加载。每当过滤的列表发生更改或服务刚从json文件加载完毕时,请记住更新缓存的列表。

通过在控制器中公开此服务,您可以将ngRepeat绑定到服务返回的列表,并且始终会首先考虑缓存的列表(因此加载时不会花费10秒以上的时间)列表)

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