Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2016-09-20
2
Medium Priority
?
120 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 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

916 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