How to get all nodes and connector (edges) as JSON using JSPlumb in reactJS

Question

so im working with jsplumb with reactjs, everything works fine but i have a button when it clicked it will store the jsplumb data to database, i cant find any method from surface or toolkit instance except autosave, is there any way how to get my current jsplumb data as json ?

const loadData = async () => {
  const urlDetail =
     baseUrl + '/DecisionFlow/generateObjectCheckerApproval/' + id
  const data: any = await handleGet(urlDetail)
  const { edges, nodes } = data.flows

  toolkit.load({
     type: 'json',
     data: { edges, nodes: classifyChart(nodes) },
  })
}

useEffect(() => {
  pathEditor.current = ConnectorEditors.newInstance(
     surfaceComponent.current.surface
  )

  if (surfaceComponent.current) {
     sidebarItems.forEach((sb: any, i: any) => {
        const container = document.querySelector(
           `#${joinStrAsId(['sidebarJSPlumb', sb.component])}`
        )!

        const p = createRoot(container)

        p.render(
           <Provider store={store}>
              <DragDropNodeSource
                 surface={surfaceComponent.current.surface}
                 title={sb.component}
                 container={container}
                 items={sb.detail}
              />
           </Provider>
        )
     })
  }

  loadData()
}, [])

return (
  <>
     <div style={{ display: 'none' }} ref={saveRef}></div>
     <div id="mantap" className={style.container}>
        <button onClick={handleClick}>save as json</button>
        {toolkit && (
           <JsPlumbToolkitSurfaceComponent
              renderParams={jsPlumbrenderParams(toolkit, pathEditor)}
              toolkit={toolkit}
              ref={surfaceComponent}
              view={jsPlumbView(toolkit, pathEditor)}
           />
        )}
     </div>
  </>
)

this is the result sample of my jsplumb

this json is what im expecting

Answer 1

You can use the exportData() method on the toolkit object to get the dataset.