Solved

How to Transfer large json from server to browser part by part

Posted on 2016-09-20
2
89 Views
Last Modified: 2016-09-27
HI,
In my web application i build a json out of a query. And sometimes its very huge.
I am displaying the data from json on the web page.
I make an ajax call and wait for the full response and then display it on the web page with scrollbar.
If the json size is small then this approach is fine but with large json the page just hangs waiting for the data to come up.
A single page can hold approx 10 elements from the json.
So i need some way to transfer the initial 10 elements of json quickly and then display it on page and the rest can come lazily which anyway the user will see only if he scrolls down.

I think there could be two approaches to it :
1) Send the initial 10 elements so that user can see it. And at the back keep waiting till the data is transfered and just append it to web page. and if the user scrolls meanwhile he just waits with a loading image showing

2) Other appraoch could be only when the user scrolls down do i make a call from say next 20 elements...and append it to the web page.

Please suggest which way is better and feasible.
Also how do i go about coding this in javascript and java.
how is such a problem solved.
Also any better approach ?

Thanks
0
Comment
Question by:Rohit Bajaj
  • 2
2 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41808001
I have removed the Java EE tag as this question is not related to Java -- only to javascript.
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41808012
This expert suggested creating a Gigs project.
My recommendation would be to make two separate ajax calls -- one for the initial 10 elements and another for the remaining elements. Depending on your database, it should be easy to limit the first call to the first 10 records and start the second call with the eleventh record. Both ajax calls could be made simultaneously but that might cause problems if the second completes before the first. The first ajax call could easily trigger the second call when it completes. Or the parent div could remain hidden until the first call completes and the first call prepends to the div while the second call appends.

Your proposed alternative of appending the additional records in chunks as the viewer scrolls the page is not a bad idea. It would be similar to the way Facebook works. But I am personally annoyed by the way Facebook pauses and jumps when scrolling. Your record rendering might not be as cumbersome as Facebooks though.

Either way, the solution to this would be complicated -- beyond the scope of this forum. I recommend EE Gigs to get an expert to assist in your project.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Alert after MVC form submitted 1 22
binding event to form in window.open 9 42
Adding items to a C# list incrementally 5 36
Javascript object functions help 1 6
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question