Angularjs get request for a huge json file

angularjs, javascript, jquery, json

Solution

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.

Problem

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??

Original source