['bpmn:definitions'] usage in reactjs and vuejs

Developers
1

In VUE JS

this.bpmnViewer.saveXML(
        {
          format: true,
        },
        function (err, xml) {
          if (err) {
            return console.error("could not save BPMN 2.0 diagram", err);
          }
          var resultCompact = convert.xml2json(xml, options);
          data = resultCompact;
          let jsonData = JSON.parse(data)
         let processElements = jsonData.definitions?.process
        }
      );

I am able to access jsonData.definitions?.process in vue.js, ah shown above.

Where as in reactJs i am not able to do the same i need access like below

let definitions = jsonData[‘bpmn:definitions’]
let processElements = definitions[‘bpmn:process’]

IN react i am not able to access same way

in both react and vue i am using “bpmn-js”: “^3.5.0”,

can someone pls help me out

can i access in the same way as in vue js

2

The code snippet you posted is not formatted correctly. To share code examples that illustrate your problem, please adhere to the following rules:

  • Do not post screenshots of your code
  • Focus your snippets on the few lines that matter for the topic at hand
  • Format your code

Please update your post according to these rules. We may not be able to help you otherwise. In extreme cases we may also close your topic if we regard it as spam.

Hint: To share complete setups, create and link a CodeSandbox. This way, we can inspect the problem at hand in action and, thus, can help you in a timely and more effective manner.

Thanks :heart:

3

Updated the question in required format. please help me out.

Thanks in advance.
Manikanth

4

My best guess is that jsonData in React and Vue are two different things.

In your Vue example it is an object literal, created by BPMN 2.0 XML → JSON transformation.

In the React case you don’t provide necessary context that would allow me to judge.

As it is this looks like an application (user land) problem, and not like an issue with our libraries.

5 

modeler.saveXML({ format: true }, (err: any, xml: any) => {
        if (err) {
          console.log('err', err)
        } else {
          dispatch({
            type: 'UPDATE_DISPLAY_PROPS',
            payload: xml
          })
        }
      })

let bpmnData = xml2json(stateRef.current?.displayProps, options)
    let jsonData = JSON.parse(bpmnData)
    let definitions = jsonData['bpmn:definitions']
    let processElements = definitions['bpmn:process']

This is how i am using in react .Please check.

6

I have found the solution…Thanks team