How to make JSON loads faster with large data (on HTTP or WebPage)

Question

. Requesting the page(on HTTP or WebPage), it is very slow or even crash unless i load my JSON with fewer data. I really need to solve this since sooner or later i will be using large amount of data frequently. Here are my JSON data. --->>>

Notes: 1. The JSON loads only String and Integer. 2. I used to view my JSON in JSONView more like treeview using plugin from GoogleChrome.

I am using angular and nodejs. tq

Answer 1

A quick resume of all the things that comes to my mind :

I had a similar issue once. My solutions may make the UI change.

1. Pagination

I doubt you can display that much data at one time, so the strategy should be divising your data in small amounts and then only load more when the client ask for it.

This way, the whole data is no longer stored in RAM as it is currently. This is how forums works (only 20 topics at a time).

Just imagine if StackOverflow make you load the whole historic of questions in the main page, how much GB would your navigator need just for that ?

You can use pagination in a classic way (button with page number, like google), or in an infinite scroll way, as you want.

For that you need to adapt your api and keep track of the index of the pages you already loaded at every moment in your Front. There are plenty of examples in AngularJS.

2. Only show the beginning of the data

When you look at Facebook comments, you may have a "show more" button. In their case, maybe it's to not break the UI, but it can also be used to not overload data.

You can display only the main lines of your datae (titles or somewhat) and add a button so the user can load more details if they want.

In your data model, the cost seems to be on the second level of "C". Just load data untill this second level, and download the remaining part ( for this object ) only if the user asks for.

Once again, no need to overload, your client's RAM will be thankfull, and your client's mobile 3G too.

3. Optimize your data stucture

If this is still not enough :

• As StefanArya said in comment, indeed remove the "I" attribute, which is redundant with the JSON key.

Remove the "I" as you can use Object.keys() to get key name.

• You also may don't need that much precision on your floats.

If I see any other ideas, I'll edit this post later.