Javascript – Relatively large data on client side in web application

client-sidejavascriptweb-development

We are discussing on building a web application where (as per clients requirement), there will be relatively large data (60,000 items) to be shown as tree view.

Let's assume each item is string of 500 characters .

My questions is about maintaining such data on client side.

Basically this is an overkill to be used in asp.NET web form with viewstate (correct me if I am wrong).

What are better options of handling such huge list of items with providing sorting and searching ability on them?

I was thinking to bring them once and keep them in local storage but then found out local storage to be limited to 5MB and it's clear that we need more.

Best Answer

I had a similar problem where we needed to display information about cars and other products that was structured like a tree (car brand -> model -> type -> build year). Even if the browser would hold that much data (not sure about that) it would take forever to download it.

What I did: Load the first level and load other levels via Ajax only when actually needed for display. Since we needed to display this as a menu and show the next level very fast on mouse over the possible results where cached on the server (if you need specific sorting this may become a problem).

Same goes for searching and sorting. Let the server do it and load the results. You won't sort over the whole structure in a tree view, but only on one level. Obviously this may be the most difficult part depending on how exactly your data is structured and what types of searching and sorting you want to do.

Also in a tree view people won't have open all nodes at once, this makes it bad to handle and you would need to scroll all the time. You could still load the first two levels if the amount of data allows it and then load level three if level two is opened for some item. So this can be handled as you need it.

Even if loading on demand would not work for you, you could still just load level one and after that when the document is loaded start some process in the background that loads the deeper levels one by one. This would most likely work faster than the user can scroll down.

Related Topic