Question

39

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

rated 0 times [ 42] [ 3] / answers: 1 / hits: 143800 / 11 Years ago, thu, june 27, 2013, 12:00:00

I have a huge dataset of several thousand rows with around 10 fields each, about 2MBs of data. I need to display it in the browser. Most straightforward approach (fetch data, put it into $scope, let ng-repeat= do its job) works fine, but it freezes the browser for about half of a minute when it starts inserting nodes into DOM. How should I approach this problem?

One option is to append rows to $scope incrementally and wait for ngRepeat to finish inserting one chunk into DOM before moving to the next one. But AFAIK ngRepeat does not report back when it finishes repeating, so it's going to be ugly.

Other option is to split data on the server into pages and fetch them in multiple requests, but that's even uglier.

I looked through Angular documentation in search of something like ng-repeat=data in dataset ng-repeat-steps=500, but found nothing. I am fairly new to Angular ways, so it is possible that I am missing the point completely. What are the best practices at this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyaleenag

Add To Favorites

Follow

Total Points: 678

Total Questions: 121

Total Answers: 105

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

harleyaleenag questions

1 How to use redis client in nestjs?

Thu, May 5, 22, 00:00, 2 Years ago

1 After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Thu, Oct 22, 20, 00:00, 4 Years ago

1 TypeScript type for value of key in object

Wed, Aug 19, 20, 00:00, 4 Years ago

1 GDPR: youtube-nocookie embedded URL's, need visitors' permission?

Tue, May 19, 20, 00:00, 4 Years ago

1 How to wait for fetch to complete before rendering page in React.js

Thu, Mar 5, 20, 00:00, 4 Years ago

View All

answered 11 Years ago eanskylerg · Accepted Answer

I agree with @AndreM96 that the best approach is to display only a limited amount of rows, faster and better UX, this could be done with a pagination or with an infinite scroll.

Infinite scroll with Angular is really simple with limitTo filter. You just have to set the initial limit and when the user asks for more data (I am using a button for simplicity) you increment the limit.

<table>

    <tr ng-repeat=d in data | limitTo:totalDisplayed><td>{{d}}</td></tr>

</table>

<button class=btn ng-click=loadMore()>Load more</button>



//the controller

$scope.totalDisplayed = 20;



$scope.loadMore = function () {

  $scope.totalDisplayed += 20;  

};



$scope.data = data;

Here is a JsBin.

This approach could be a problem for phones because usually they lag when scrolling a lot of data, so in this case I think a pagination fits better.

To do it you will need the limitTo filter and also a custom filter to define the starting point of the data being displayed.

Here is a JSBin with a pagination.