Angularjs get request for a huge json file

Question

I need to display some data from a database to the user. The data is in a json file and has a pretty huge size. The size of json file is roughly around 15MB. I created a service and used the promise api to make a successful request and load the data and show it to user by doing on ng-repeat on a div. Now as you understand the page will show the data only when the file is available and making a get request to fetch a 15MB file takes enormous amout of time. I see in some cases Firefox simple stops loading the file after some time. Now my question is what is the Angular way of doing such a task.

I am thinking of doing something like first showing just a few entries from json file and then on scrolling the rest of the page will be populated by the remaining data but I guess that won;t be possible because when the get request it made, it will first completely download the file and then display data?

Angular provides something called ng-cloak but that's just for flickering avoidance. Is there something like ng-cloak in angular that I can use? Any other Ideas or how to deal with such scenarios or what is the angular way of accomplishing this??

Answer 1

Based on your requirements of dealing with essentially a huge JSON payload. FWIW you have two options:

• Your server supports HTTP/JSON streaming:

  create an angular onreadystatechange handler and use a streaming JSON parser like oboe.js

• Your server DOES NOT support HTTP/JSON streaming

  Do what everyone else is suggesting and provide a paginated access to that payload so that the browser can load it in chunks on demand.

Answer 2

Make your backend deliver the file in chunks, so that your angular frontend can retrieve part of it at a time.

Something like:

/backend/getentries?skip=500&count=100

The have your frontend repeatedly call the backend while counting up skip and append the results you are getting back to whatever you already have in the frontend.