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.

[Karanpal97]

@josdejong i am using the kib and when i click on any key in editor i am getting the error as this.multiselection is null ./node_modules/jsoneditor/dist/jsoneditor.min.js/</5633/t._onMultiSelect@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_Delete_js-node_modules_mui_icons-material_ExpandMore_-12e353.chunk.js:55151:123 ./node_modules/jsoneditor/dist/jsoneditor.min.js/</5633/t._onMultiSelectStart/this.mousemove<@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_Delete_js-node_modules_mui_icons-material_ExpandMore_-12e353.chunk.js:55145:15 can u plz reply where and what is the issue in the code

[josdejong]

@Karanpal97 this issue seems unrelated, can you please open a new issue and describe there how to reproduce the issue?

[Karanpal97]

@josdejong i am using the lib this way

const JsonEditorComponent = ({ jsonData, onUpdate }) => {
  const editorRef = useRef(null);

  useEffect(() => {
    let editor;
    if (editorRef.current && jsonData) {
      const options = {};
      editor = new JSONEditor(editorRef.current, options);

      // Set JSON data
      editor.set(jsonData);

      // Attach event listener to the DOM element
      const handleUpdate = () => {
        const updatedJson = editor.get();
        onUpdate(updatedJson);
      };

      editorRef.current.addEventListener('change', handleUpdate);

      // Clean up when component unmounts
      return () => {
        editor.destroy();
        editorRef.current.removeEventListener('change', handleUpdate);
      };
    }
  }, [jsonData, onUpdate]);

  return <div id="jsoneditor" ref={editorRef} style={{ width: '400px', height: '400px' }} />;
};

plz see where is the issue it will be highly helpfull for me i am grtting error as this.multiselection is null ./node_modules/jsoneditor/dist/jsoneditor.min.js/</5633/t._onMultiSelect@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_Delete_js-node_modules_mui_icons-material_ExpandMore_-12e353.chunk.js:55151:123

plz sir help me i am struck since teo days

[Karanpal97]

@josdejong i am getting thie in console jsoneditor.js:12600 Uncaught TypeError: Cannot read properties of null (reading 'start') at t._onMultiSelect (jsoneditor.js:12600:1) at jsoneditor.js:12600:1??? ???

[josdejong]

can you please open a new issue