How can i insert my big data in html on chunks?

Viewed 57

I am making a http call where the response is coming fast from the API. It is a big data so when i try to insert that on my HTML by browser freezes

 ngOnInit() {
    const params = {
      page: 1,
      size: 100000
    }
    this.testSer.getPassengers(params).subscribe(
      (data: any) => {
        this.data = data.data;
      })
  }
<ul *ngFor="let item of data; let i = index">
  {{ i}} -- {{ item.name }}
</ul>

How can i 'give work' on chunks to browser ?

what i tried

In past somewhere i saw a code similuar to this

ngOnInit() {
    const params = {
      page: 1,
      size: 100000
    }
    this.testSer.getPassengers(params).subscribe(
      (data: any) => {
        this.data = data.data;
        this.timeoutInterval = setTimeout(() => {
          this.loopChunks();
        }, 150);
      })
  }

  loopChunks() {
    if (this.currentChunk < this.data.length) {
      this.currentChunk += this.chunkStep;
      this.timeoutInterval = setTimeout(() => {
        this.loopChunks();
      }, 1000);
    }
  }

where he used setTimeout for that but i can't make that work

1 Answers

I'd argue that rendering the DOM elements itself is what freezes your browser.

You may want to add virtual scroll to your table so that you only display what's currently visible in the screen instead of everything at once.

There are many libraries that can help you with that, like Clusterize or ngx-virtual-scroller.

Related