There is a json file of ~ 20,000 entries. if i do

$http.get('file.json') .success(function (result) { for (var i = 0; i < result.aaData.length; i++) { $scope.row.push(result.aaData[i]); } });

the browser just hangs. But if I write

 for (var j = 0; j < 200000; j++) { $scope.row.push(generateRandomItem(j)); }

Even such a wild number of records is loaded, but if I write

 $http.get('file.json') .success(function (result) { for (var j = 0; j < 200000; j++) { $scope.row.push(generateRandomItem(j)); } });

As again, the browser freezes tightly. What are some ideas how to solve this problem and how to display a large table on angularjs?

  • It is very likely that there may be a bug in angular. I would reduce the number from 200,000 to 200 and run profiler (dev tools-> profiles). - E_p
  • Up to 20,000 ship normally. More browser hangs .... - Oleg Kosarev
  • Quantity is not important. Run what would work and see in profiler that eats resources - E_p
  • What is $scope.row and why is there a push , not an assignment? - Qwertiy ♦

2 answers 2

Just drop the entire result.aaData table in $scope.row point is that for each attempt to change the array, the browser calls the rerender (20,000 renders during the load). Your task is to load it at a time, or not immediately in skoup, but through a intermediate variable

  • that is, you offer $ http.get ('file.json') .success (function (result) {$ scope.row.result.aaData}); - Oleg Kosarev
  • and then ng-repeat = "$ scope.row.result.aaData in row"? - Oleg Kosarev
  • Eh What renderer and why would he call it? - Qwertiy ♦
  • I suggest $ http.get ('file.json') .success (function (result) {$ scope.row = result.aaData;}); - KoIIIeY
  • limited unloading in 9000 lines; hangup occur but not significant. and if I do through "$ resource ('get_clients.php'). query (). $ promise.then (function (clients) {vm.clients = clients;});" That constantly I receive that the script does not answer and on the profile I receive red here such "Small GC duration 13.44ms reason: Nursery Object to Active Type: Nursery Collection" - Oleg Kosarev

In short, I do not know what it is connected with, but if you use smart teible

and write like that

  $scope.itemsByPage = 15; $scope.rowCollection = []; $scope.displayed=[]; $http.get('get.json') .success(function (result) { var rowCollection = result.aaData; $scope.rowCollection = rowCollection; });

then in the view

 <table st-table="displayed" st-safe-src="rowCollection" class="table table-striped"> <thead> <tr> <th st-sort="firstName">first name</th> <th st-sort="lastName">last name</th> <th st-sort="birthDate">birth date</th> <th st-sort="balance">balance</th> <th>email</th> </tr> <tr> <th> <input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/> </th> <th colspan="4"> <input st-search placeholder="global search" class="input-sm form-control" type="search"/> </th> </tr> </thead> <tbody> <tr ng-repeat="row in displayed"> <td>{{row.name | uppercase}}</td> <td>{{row.lastName}}</td> <td>{{row.birthDate| date}}</td> <td>{{row.balance| currency}}</td> <td><a ng-href="mailto:{{row.email}}">email</a></td> </tr> </tbody> <tfoot> <tr> <td colspan="5" class="text-center"> <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div> </td> </tr> </tfoot> </table>

then the download of 8362 elite takes no more than 3 seconds and the browser does not freeze. If you do in the form of a test

  for (var j = 0; j < 200000; j++) { $scope.rowCollection.push(generateRandomItem(j)); }

it loads literally instantly.

The whole catch was in what I wrote st-table = "rowCollection" and then ng-repeat = "row in rowCollection" and it was necessary so that st-table = "displayed" st-safe-src = "rowCollection" and then ng -repeat = "row in displayed " What is the catch yet have not read but if someone will search I will be grateful

  • stSafeSrc attribute If you are bringing in data asynchronously (from a remote database, restful endpoint, ajax call, etc) you can use the stSafeSrc attribute. It can be up to an infinite loop. This is from the documentation. - KoIIIeY