I am currently facing an issue with loading a JSON file containing 3500 data. The data appears very slowly on the view, causing the application to work sluggishly.
Below is a snippet of the JSON:
export class Service {
private items = new Array<Mjeket>(
{ "Emer": "Iliriana"},
{ "Emer": "Ada" },
{ "Emer": "Ada"},
{ "Emer": "Adela"},......{...})
getallitems(): Array<Items> {
return this.items;
}
}
In my component.ts file:
getall() {
this.items = this.service.getallitems();
}
Within component.html:
<StackLayout *ngFor="let item of items; let i = index;">
<GridLayout columns="*,*,*" rows="auto" style="padding: 10%;">
<Label [text]="item.Emer" class="list-group-item-heading"
style="width: 60%; font-size: 16px; text-align: left; color: black;"
row="0" col='0' horizontalAlignment="left"></Label>
</GridLayout>
</StackLayout>
I am seeking suggestions on how to optimize the data loading process to ensure faster performance, especially when dealing with a large amount of data. Any ideas would be greatly appreciated!