Angular large json file

Question

I've read that best practice when scaling Angular is to limit the viewable area in an ng-repeat. I've done that (I believe) in this case by limitTo (and, this is a true limitTo...no infinite scrolling or anything yet):

<li ng-repeat="lister in videos | filter:query | orderBy:orderProp | limitTo:20"
                 class="video_link">
   <p class="background_435F2C">
        <a id="{{lister.id}}" href="#/videos/{{lister.id}}">{{lister.name}}</a>
   </p>
</li>

However, when I bring in test data via a JSON file with 20,000 simple records, response time on the associated query filter (just the standard Angular query, nothing fancy) declines. There's noticeable lag when typing in the input.

Any thoughts? Is filtering a large JSON file like this best practice, or is it really something that should be done server-side, going to a /search page?

Thanks!

przno · Accepted Answer · 2014-04-08 13:47:36Z

2

In cases like yours, do the filtering in JS code in controller, not in the HTML (because it eventually runs twice if in HTML).

// inject $filter into controller
.controller('MyCtrl', ['$scope', '$filter', function ($scope,$filter) {
...

var filterFilter = $filter('filter');
var orderByFilter = $filter('orderBy');
var limitToFilter = $filter('limitTo');

var tmp = filterFilter($scope.videos , $scope.query);
tmp = orderByFilter(tmp, $scope.orderProp);
$scope.videosPreFiltered = limitToFilter(tmp, 20);

Then in html

<li ng-repeat="lister in videosPreFiltered class="video_link">
   <p class="background_435F2C">
        <a id="{{lister.id}}" href="#/videos/{{lister.id}}">{{lister.name}}</a>
   </p>
</li>

answered Apr 8, 2014 at 13:47

przno

3,5145 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular large json file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related