Ionic handle display large json

Ionic Framework ionic-v3
1

Hi,

I would like to ask you how to handle very large json file and display on screen. I tried to download json file from server and save it to local storage. after that I use

this.file.readAsText(dir_to_json, path).then((response)=>{
        let v = JSON.parse(response);
        this.verses = v.data.verses;
})

to get from json file. and use below code to display.

<ion-grid class="border-bottom" *ngFor="let item of verses; let i=index">
      <ion-row>
        <ion-col col-1></ion-col>
        <ion-col col-11 text-right>
          <div class="font-scheherazade verse">{{item.verse_ar}}</div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-11>
          <p class="transliteration">{{item.verse_trans_th}}</p>

          <p class="translate">
            {{item.verse_order+1}}. 
            {{item.verse_th}}
          </p>
        </ion-col>
        <ion-col col-1></ion-col>
      </ion-row>
    </ion-grid>

the problem is if JSON file is small, this code work well but it JSON file is large, the screen will get stuck so I would like to ask you how I can handle this issue.

PS. my JSON file is about 1MB large.

Thank you

2

hi
do you trying pagination
i mean load more option?