display a huge JSON data with react-json-view

by

I work on some vite + react + typeScript + swc client side project for a company

The client side I build for them needs to be as generic as possible. It’s means, that with some adjustments they will combine my client side in something like 10 different projects.

In that project there is a need to display a huge JSON data (something like 50MB), only with react-json-view library (because of the features and design – if there is some proper replacement I will be happy to hear :-))

The problem is, that I cannot display such amount of data in my page in one time, and I didn’t found a way or a library that give a solution of big data dispaying and supports react-json-view

So, I’m looking for a solution enables me to display such amount of json data in an effective way, that will not cause a crash

In the company, all their servers send a huge data in one time, and because their systems ar critical there is no option to change that for now.

I tried to use pagination, but I don’t know which object I will get, in each case it’s other object.
Also, I tried to use lazy loading but it’s not working well on react-json-view

Unless there is a suitable replacement, I need to use that library (react-json-view) only
I tried to check those libraries:

  1. react-json-view-lite
  2. react-json-pretty
  3. react-json-inspector
  4. react-json-tree
  5. react-json-tree-viewer
  6. material-ui-json-schema-viewer

but all of those libraries are unsuitable for the project needs

Also, I checked about those options:

  1. react-window
  2. react-virtualized
  3. react-wirtuoso

but I realized that, they work only with lists and trees

someone had that problem before and can give me some advice please?

  • You’ve asked if we had this problem before, but never really stated what the actual problem is. What is it about react-json-view that makes it unsuitable for your scenario? Why is it unsuitable for displaying this huge data that you mention?

    – 




  • I apologize if I wasn’t completely clear, I will fix that also in the question body My problem is that react-json-view overhead is likely small, maby because her rich features – I need her features, but in the other hand I cannot display a lot of JSON data I’m looking for a solution that enable me display something like 50MB of JSON data in my page, but in a way that will not cause a crash

    – 

  • Hm, i am not sure it is a good idea to show 50mb of info to the user – a human cannot comprehend so much information at once. Maybe its better to think about splitting large file into small blocks of info?

    – 

Leave a Comment