0

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.

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.

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.

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.

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.

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.

JSON File. [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.

<div ng-controller="ProductListCtrl">
    <div ng-repeat="item in liquorProdList | orderBy:'Description'" >
        <p > {{item.Description}} </p>
    </div>  
</div>
locknies
  • 1,345
  • 3
  • 15
  • 36

3 Answers3

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)?

AngularJs with large JSON array

Community
  • 1
  • 1
joydesigner
  • 813
  • 5
  • 11
  • Are you suggesting limiTo?? What about adding a limitTo:numbers and add $scope.numbers=20; is it anyhow helps performance wise to display data? – locknies Jan 09 '15 at 06:10
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

There are a few others around as well, this is just the one I've used myself.

Danny
  • 124
  • 1
  • 5
  • Pagination helps when displaying data at a single time. what if iam planning to add a textbox to display filtered data? whenever i type a text in textbox it will iterate through whole 2500 records. – locknies Jan 09 '15 at 06:14
  • It will probably lag a bit in that case, as you type. Might still be worth a try. – Danny Jan 09 '15 at 06:19
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.

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)

Note that this is a simple solution with the assumption that the json file is static and thus will never be changed.

tamakisquare
  • 16,659
  • 26
  • 88
  • 129
  • Sorry, as i said am not so advanced in angular. can you please elaborate a little more? Yes, my json contains static data. service? are you refering to web service? this whole app is intended for mobile application development and it should also work offline..!! – locknies Jan 09 '15 at 07:05
  • I was referring to AngularJS services. It's a fundamental concept in AngularJS. I suggest you study [the official doc on services](https://docs.angularjs.org/guide/services) first before proceeding further. – tamakisquare Jan 09 '15 at 07:16
  • [Here is an example of the caching service](http://curran.github.io/screencasts/introToAngular/exampleViewer/#/43) that I was talking about. In the example, `countryApp.factory('countries'...` is the service. You should modify it according to your requirements. But the general idea is the same. Give it a shot and get your hands dirty. Good luck :) – tamakisquare Jan 09 '15 at 07:19
  • Thanks mate! I will look into it! if it solved my issue then i will definitely marks as answer! – locknies Jan 09 '15 at 07:21
  • Thanks.. bye the way, do you have any suggestions for displaying data. ie, listing huge amount of data using ng-repeat as i asked in the first place.. ?? – locknies Jan 09 '15 at 08:52