1

I have a JSON file with more than 200000 records in it.

I'm using Angular CLI for accessing JSON data with the help of json-server API for accessing it locally.

Im using Angular http request to access JSON, it is getting displayed into browser but not into angular table component.

I checked if ill be able to access it with less number of records then it got displayed, with upto 1000 records i have checked but max i don't know how much it access.

so i just want any solution for accessing large JSON data into angular view efficiently.

please suggest any solution or alternative for the same.

Improve this question

1 Answer 1

Reset to default
3

This may be opinionated answer but you've many options.

  1. Try lazy loading table data.

  2. Implement Infinite Scroll by loading 50 rows initially & when user reach end of table, load next 50 and so on. Use following plugin for that to minimize your code.

    ngInfiniteScroll

  3. Add pagination to table by using custom filter on ngFor to filter out elements with their index no. You can use following awesome plugin lib

    ngx-pagination

  4. Make use of grids. This is best performance, reliable solution. There are many grids like ag-grid, slickgrid, Angular data table, etc use according to requirement. ag-grid is Angular supported and slickgrid is pure js grid but you can surely configure inside angular project. Also you can try data tables from PrimeNg. With using grids, searching, filtering, exporting table data becomes very efficient.

    ag-grid

    Angular DataTables

    SlickGrid

    PrimeNG Table

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.