CODEWITHSUNDEEP
javascriptjqueryjsonangularjs
Mike
Mike

Reputation: 3418

Angularjs get request for a huge json file

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

Upvotes: 7

Views: 7176

Answers (2)

Vlad Gurovich
Vlad Gurovich

Reputation: 8463

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.

Upvotes: 7

Anders Bornholm
Anders Bornholm

Reputation: 1336

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.

Upvotes: 1

Related Questions