Methods set and update are not applied synchronously

[many2023]

const options = {
        mode: "tree",
        mainMenuBar: true,
        navigationBar: false,
        statusBar: false,
        enableSort: false,
        enableTransform: false,
        colorPicker:false,
        readOnly: true,
        parser: LosslessJSONParser,
        pathParser: LosslessJSONParser,
        validationParser: LosslessJSONParser,
        onRenderMenu(items, context) {
            return items.slice(4)
        }
    }
    const editor = new JSONEditor({target: container, props: options})

    editor.set(json) // or editor.update(json)

    editor.expand(path => true)

[josdejong]

Can it be that you're using jsoneditor instead of svelte-jsoneditor?

[many2023]

I'm using the vanilla-jsoneditor，Because setting LosslessJSON into options.parser is worked

[josdejong]

Ok clear, I thought that because you're using options like enableSort and enableTransform which are not available in svelte-jsoneditor. On a side note, I do not think you should configure pathParser and validationParser to use the lossless JSON parser.

I see the editor does not synchronously update it's contents, and the editor is not yet updated right after editor.set. If you expand after a timeout of 0 things work as expected:

editor.set(json) // or editor.update(json)

setTimeout(() => editor.expand(path => true))

What also works is passing the contents directly at creation:

const options = {
  // ...
  content: { json }
}
const editor = new JSONEditor({target: container, props: options})

I'll look at a solution to this. Maybe it is necessary to make set and update async to prevent issues like this.

[josdejong]

Fixed now in v0.16.0 by making these methods async, making sure their effects are applied and the editor is fully re-rendered. So you can do:

await editor.set(json)
await editor.expand(path => true)