Faster loading/parsing of JSON file

[abhimeht23]

Hello @josdejong,

I have a JSON file with over 50K lines of data in it. Using Express JS web app to show the data using json editor. It takes approximately 5~10 seconds to show the data on the screen. Is there something that I could do to speed up the json editor to show up quicker?

Thanks, Abhi

[josdejong]

A JSON file with 50k lines should not be a problem at all and should load about instantly.

Does the file also take that long to load in https://jsoneditoronline.org/classic/ ?

[abhimeht23]

Hi @josdejong ,

I am using tree view with expand All option and it does take the same amount of time on the jsoneditoronline.org as it does in my express web app. So I changed it to collapse all instead of expand All option and page loads much faster. Any hope we can get it to parse with expand All as quick as it does in collapse All?

Thanks, Abhi

[josdejong]

Ah, yes, expanding the full document can take time: everything needs to be rendered in the browser which is relatively slow.

Some ideas:

• Do not expand all nodes. You can see if you can use JSONEditor.expand(options) to expand for example the first few levels of nested objects but not very deeply nested objects.
• Use code mode. In code mode, such a document will be fast to render: the code mode smartly renders only the visible lines.

[berry4u]

Ah, yes, expanding the full document can take time: everything needs to be rendered in the browser which is relatively slow.

Some ideas:

• Do not expand all nodes. You can see if you can use JSONEditor.expand(options) to expand for example the first few levels of nested objects but not very deeply nested objects.
• Use code mode. In code mode, such a document will be fast to render: the code mode smartly renders only the visible lines.

How can I expand only the first n levels of a tree (i.e. the first two levels)?

[josdejong]

You'll have to write a little recursive functions that iterates over the keys of an object and items of an array, and for every entry call editor.expand({ path: [...], isExpand: true, recursive: false })

On a side note: the successor of this library, svelte-jsoneditor, has a different API for this which is easier: there you can pass a callback like editor.expand(path => path.length < 2) to expand everything up to two levels deep.