Can't able to extract the data from the dmn file

Developers
1 
import React, { useEffect, useState } from "react";
import DmnJS from "dmn-js/lib/Modeler";
import "./index.css";
import "dmn-js/dist/assets/diagram-js.css";
import "dmn-js/dist/assets/dmn-font/css/dmn-embedded.css";
import "dmn-js/dist/assets/dmn-js-decision-table-controls.css";
import "dmn-js/dist/assets/dmn-js-decision-table.css";
import "dmn-js/dist/assets/dmn-js-drd.css";
import "dmn-js/dist/assets/dmn-js-literal-expression.css";
import "dmn-js/dist/assets/dmn-js-shared.css";
import { migrateDiagram } from "@bpmn-io/dmn-migrate";
import { diagram } from "./diagram";

// import DmnPropertiesPanelModule from "dmn-js-properties-panel";
// import PropertiesProviderModule from "dmn-js-properties-panel/lib/provider/camunda";

const DMNEditor = () => {
  const [dmnDiagram, setDmnDiagram] = useState(diagram);

  const _getDmnFile = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
      const fileContent = event.target.result;
      const dmnDiagram = `${fileContent}`;
      setDmnDiagram(dmnDiagram);
    };

    reader.onerror = (event) => {
      console.error("Error reading DMN file:", event.target.error);
    };

    reader.readAsText(file);
  };

  const renderDMNDiagram = async () => {
    const dmnJS = new DmnJS({
      container: document.getElementById("container"),
      width: "100%",
      height: "100%",
      position: "absolute",
      decisionTable: {
        keyboard: {
          bindTo: document,
        },
      },
      propertiesPanel: {
        parent: "#properties-panel",
      },

      // additionalModules: [
      //   DmnPropertiesPanelModule,
      //   PropertiesProviderModule
      // ]
    });

    try {
      const migratedXML = await migrateDiagram(dmnDiagram);
      await importXML(migratedXML, dmnJS);
  
      // Extracting data from the DMN table
      const table = dmnJS.getActiveViewer().get("table");
      const tableData = table.get();
  
      console.log("DMN Table Data:", tableData);
    } catch (error) {
      console.error("Error initializing DMN diagram:", error);
    }

    return dmnJS;
  };

  const importXML = (xml, dmnJS) => {
    return new Promise((resolve, reject) => {
      dmnJS
        .importXML(xml)
        .then(() => {
          resolve();
        })
        .catch((err) => {
          reject(err);
        });
    });
  };

  useEffect(() => {
    let dmnJSInstance;

    const init = async () => {
      dmnJSInstance = await renderDMNDiagram();
    };

    init();

    return () => {
      if (dmnJSInstance) {
        dmnJSInstance.destroy();
      }
    };
  }, [dmnDiagram]);

  return (
    <main className="">
      <div id="container"></div>
      <div>
        <label htmlFor="dmnFile" className="label">
          import
        </label>
        <input
          onChange={_getDmnFile}
          type="file"
          id="dmnFile"
          className="btn"
          accept=".dmn"
        ></input>
      </div>
    </main>
  );
};

export default DMNEditor;

I’m trying to extract the data of an dmn file by importing the file into my react app. But when I console the tabel, I’m getting this error.

DMNEditor.jsx:67 Error initializing DMN diagram: Error: No provider for “table”! (Resolving: copyPaste → table)

I want to get the data in a json format from the dmn file Any help on this would be grateful.

2

There is no module called table. How did you come up with this code?

3

@philippfromme :
I’ve read something like this in dmn-migrate repo. Is it wrong ? How to get the json of an dmn file ?

4

There is no JSON of a DMN file since it’s XML. If you want a JSON representation of it you have to come up with one.