0

I am getting more than 10000 records from back-end in Angular premise call. I am using Premise to call API method in service and subscribe the same in component and getting too much records as a result set.

The problem is that my UI can't handle this much records and as a result browser gets hanged totally. So can any one tell me how to handle such a situation ?

This is my sample code in which I am getting more than 10000 records.

this.myService.getData(this.mongodbQuery).then((data: any) => {
  try{
    if(data.operation == "SUCCESS"){
      if(data.data === "]")
      {
        that.toastr.warning("No results found, please refine your conditions!","Report");
      }else{
        that.reportResult = JSON.parse(that.stringifyJson(data));
      }          
    }
    else{
      that.toastr.warning("Data size is larger, please refine your conditions!","Report"); // Here it doesn't give me result because records are more than 10000
    }
  }
  catch(err){
    $('#loading').hide();
    that.toastr.warning("Data size is larger, please refine your conditions!","Report");
  }
},function(err){
  $('#loading').hide();
  that.toastr.warning("Data size is larger, please refine your conditions!","Report");
});
Pushkar Rathod
  • 273
  • 5
  • 21
  • I would suggest you to go with lazy load / infinite scroll or pagination – ShadowFoOrm Jan 22 '18 at 16:49
  • There is absolutely no reason to display 10000 records on the screen at once, a human cannot process that much information and do anything useful with it. Split it into pages and retrieve a fixed number of records per page (maybe 100). If you wanted you could add sorting and/or filtering as well. – Igor Jan 22 '18 at 16:53
  • @ShadowFoOrm Need to think on Pagination or Lazy loading side. Any link or reference example would be appreciated in Angular 4. – Pushkar Rathod Jan 22 '18 at 17:47
  • @PushkarRathod there are plenty plugins on the web. You will have to chose which one to use. I would recommend Material for Angular but you can use anything else like https://github.com/orizens/ngx-infinite-scroll. Or build your own function. – ShadowFoOrm Jan 23 '18 at 11:36

3 Answers3

1

Thank you for your all inputs. Following way I achieved this.

Data Grid Code

 <div class="panel-body" style="overflow-y:scroll;height:20em;width:100%;"
      infiniteScroll
      [infiniteScrollDistance]="5"
      [infiniteScrollUpDistance]="2"
      [infiniteScrollThrottle]="300"
      (scrolled)="onScroll()"
      [scrollWindow]="false">
        <table class="table table-hover table-striped table-sortable">
          <thead>
              <tr>
                  <th *ngFor="let column of columns" >
                      {{column.display}}
                  </th>
              </tr>
          </thead>
          <tbody>
              <tr *ngFor="let row of reportResult">                      
                  <td *ngFor="let column of columns">
                      {{row[column.variable]}}
                  </td>
              </tr>
          </tbody>
        </table>
 </div>

TypeScript Code

reportResult = [];
responseResult = [];
isFinished = false;

onScroll () {
    if(!this.isFinished) {
      const condition = this.dbQuery + '.skip(' + this.reportResult.length + ').limit(100)';
      this.execute(condition);
    }
  }

execute(qry){
const that = this;
$('#loading').show();

    this.reportService.getReportData(qry).then((data: any) => {
      this.isPageValid = true;
      $('#loading').hide();
      try{
        if(data.operation == "SUCCESS"){
          if(data.data === "]")
          {
            that.toastr.warning("No results found, please refine your conditions!","Report");
          }else{
            that.responseResult = JSON.parse(that.stringifyJson(data));

            if(that.responseResult.length < 100) { that.isFinished = true; }
            for(let i = 0; i < that.responseResult.length; i++) {
              that.reportResult.push(that.responseResult[i]);
            }
          }
        } else {
          that.toastr.warning("Data size is larger, please refine your conditions!","Report");
        }
      }
      catch(err){
        $('#loading').hide();
        that.toastr.warning("Data size is larger, please refine your conditions!","Report");
      }
    },function(err){
      $('#loading').hide();
      that.toastr.warning("Data size is larger, please refine your conditions!","Report");
    });  }

Also this link was helpful to use infiniteScroll.

Angular 4 with ngx infinite scroll

Pushkar Rathod
  • 273
  • 5
  • 21
0

You can use a third party library that can help you with, and I recommend using ag-grid for Angular 2/4/5/X

https://www.ag-grid.com/angular-more-details/

And for your example, in order to be able to load 100000 rows, you can use what they call "infinite-scrolling"
Example and Details here:

You can use a third party library that can help you with, and I recommend using ag-grid for Angular 2/4/5/X 

npm install ng-grid

https://plnkr.co/edit/?p=preview
https://www.ag-grid.com/angular-more-details/

I also, would recommend not using jQuery in your Angular App.

Nadhir Falta
  • 3,814
  • 1
  • 14
  • 40
0

Well, could you use pagination? If the API that you are requesting has support for it (and probably it does), you could request fewer records at a time. When using a pagination or an infinite loader to show only these smaller chunks of data.

No one is able to analyze 10000 records at one time (no a human at least), so makes a lot of sense to split this records into small parts and filtering on user interest demand.

Rinaldo Bueno
  • 57
  • 7
  • Yes you are correct so also I am thinking to develop pagination or lazy load. And from UI we have passing mongo query to API so it's not possible to ask for pagination at API side. – Pushkar Rathod Jan 22 '18 at 17:45