I'am developing a cross platform angularjs mobile application. in it there is a requirement to display some data. Now i have stored that data as json file. This json file contains nearly 2500 products. The below code works just fine. Now the problem is that when i deploy the following code in mobile it literally takes 12 - 14 seconds to iterate through json and display data.
我正在开发一个跨平台的angularjs移动应用程序。其中需要显示一些数据。现在我已将该数据存储为json文件。这个json文件包含近2500种产品。以下代码工作得很好。现在的问题是,当我在移动设备中部署以下代码时,它需要12到14秒来迭代json并显示数据。
The size of the json file is not the problem. at first the json file were 1.2 mb, i removed unwanted fields and reduced it to 320kb and also minified it. but the iteration time takes for the process is still the same.
json文件的大小不是问题。起初,json文件是1.2 MB,我删除了不需要的字段并将其减少到320kb并且还缩小了它。但是该过程的迭代时间仍然相同。
I'am planning to display complete product details on clicking on each field, it will work fine though but when the user click back and go to the main listing page after viewing a single product details, it will take 12 - 14 seconds each time which is unacceptable.
我打算在点击每个字段时显示完整的产品详细信息,但它会正常工作,但当用户点击后查看单个产品详细信息后转到主列表页面时,每次需要12-14秒是不可接受的。
Can someone suggest a better idea that is not time consuming to display this much data? I thought about converting this whole json to a SQLite db file and accessing it via query.
有人可以提出一个更好的想法,显示这么多数据并不耗费时间吗?我想过将整个json转换为SQLite db文件并通过查询访问它。
I'am not an advanced angularjs programmer (still learning) that's why i lay everything that is in front of me. Some good help will be very much appreciated.
我不是一个先进的angularjs程序员(仍在学习),这就是为什么我躺在我面前的一切。非常感谢一些好的帮助。
Edit.
What if iam planning to add a textbox and display filtered data by adding an ng-model? whenever i type a text in textbox it will iterate through whole 2500 records. When it comes to mobile then it will be a dead end.
如果iam计划添加文本框并通过添加ng模型显示过滤数据,该怎么办?每当我在文本框中键入文本时,它将遍历整个2500条记录。谈到移动,那将是一个死胡同。
JSON File. [product.json]
JSON文件。 [product.json]
[{"ProductCode":"000001","Description":"Product1","UOMml":"100","ShopAfterST":"150"},
....
....
....
}]
My controller.
myAppControllers.controller("ProductListCtrl", function($scope, $http) {
$http.get('json/product.json').success (function(data){
$scope.ProdList = data;
});
});
My template html.
我的模板html。
<div ng-controller="ProductListCtrl">
<div ng-repeat="item in liquorProdList | orderBy:'Description'" >
<p > {{item.Description}} </p>
</div>
</div>
3 个解决方案
#1
0
Try this. Create a service for returning the listing. The service should cache the latest filtered listing(ie. filtered by whatever the user has typed in the textbox). It is this cached listing that the service returns, if it exists. If no cached listing, then load from the json file. Remember to update the cached listing whenever the filtered listing has changed or the service has just finished loading from the json file.
尝试这个。创建用于返回列表的服务。该服务应该缓存最新过滤的列表(即,通过用户在文本框中键入的任何内容进行过滤)。正是这个缓存的列表,服务返回(如果存在)。如果没有缓存列表,则从json文件加载。每当过滤的列表发生更改或服务刚从json文件加载完毕时,请记住更新缓存的列表。
By exposing this service in the controller, you can bind the ngRepeat to the listing returned by the service and the cached listing will always be considered first (and thus it will not always take 10+ seconds to load the listing)
通过在控制器中公开此服务,您可以将ngRepeat绑定到服务返回的列表,并且始终首先考虑缓存的列表(因此加载列表不会总是需要10秒以上)
Note that this is a simple solution with the assumption that the json file is static and thus will never be changed.
请注意,这是一个简单的解决方案,假设json文件是静态的,因此永远不会更改。
#2
1
Display only limited records required.
仅显示所需的有限记录。
Some similar threads can be found here and hope it will help.
可以在这里找到一些类似的线程,希望它会有所帮助。
How to improve performance of ngRepeat over a huge dataset (angular.js)?
如何在巨大的数据集(angular.js)上提高ngRepeat的性能?
AngularJs with large JSON array
具有大型JSON数组的AngularJs
#3
0
I've found AngularJS doesn't cope well with large amounts of data in an ng-repeat. I found using a pagination control improves performance dramatically. Here's one which may help: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
我发现AngularJS无法很好地处理ng-repeat中的大量数据。我发现使用分页控件可以显着提高性能。以下是可能有用的内容:https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
There are a few others around as well, this is just the one I've used myself.
还有其他几个,这只是我自己使用的那个。
#1
0
Try this. Create a service for returning the listing. The service should cache the latest filtered listing(ie. filtered by whatever the user has typed in the textbox). It is this cached listing that the service returns, if it exists. If no cached listing, then load from the json file. Remember to update the cached listing whenever the filtered listing has changed or the service has just finished loading from the json file.
尝试这个。创建用于返回列表的服务。该服务应该缓存最新过滤的列表(即,通过用户在文本框中键入的任何内容进行过滤)。正是这个缓存的列表,服务返回(如果存在)。如果没有缓存列表,则从json文件加载。每当过滤的列表发生更改或服务刚从json文件加载完毕时,请记住更新缓存的列表。
By exposing this service in the controller, you can bind the ngRepeat to the listing returned by the service and the cached listing will always be considered first (and thus it will not always take 10+ seconds to load the listing)
通过在控制器中公开此服务,您可以将ngRepeat绑定到服务返回的列表,并且始终首先考虑缓存的列表(因此加载列表不会总是需要10秒以上)
Note that this is a simple solution with the assumption that the json file is static and thus will never be changed.
请注意,这是一个简单的解决方案,假设json文件是静态的,因此永远不会更改。
#2
1
Display only limited records required.
仅显示所需的有限记录。
Some similar threads can be found here and hope it will help.
可以在这里找到一些类似的线程,希望它会有所帮助。
How to improve performance of ngRepeat over a huge dataset (angular.js)?
如何在巨大的数据集(angular.js)上提高ngRepeat的性能?
AngularJs with large JSON array
具有大型JSON数组的AngularJs
#3
0
I've found AngularJS doesn't cope well with large amounts of data in an ng-repeat. I found using a pagination control improves performance dramatically. Here's one which may help: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
我发现AngularJS无法很好地处理ng-repeat中的大量数据。我发现使用分页控件可以显着提高性能。以下是可能有用的内容:https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
There are a few others around as well, this is just the one I've used myself.
还有其他几个,这只是我自己使用的那个。