How to render nodes by loading the JSON Data in React Diagram?

In Syncfusion® React Diagram, you can dynamically render nodes by loading JSON data. This functionality allows you to load diagram data from a file, making it easy to load and render complex diagrams with predefined data. This guide demonstrates how to load and render nodes from a JSON file.

Include the file input element in your HTML, configured to accept only JSON file types:

<input type="file" id="load" onChange={readJSON} accept=".json" />

When the input button is clicked, it triggers a file selection dialog, allowing users to choose a JSON file from their local storage.

Once a JSON file is selected, the application processes the file upload. The readJSON method is invoked to read the contents of the file and load the diagram. The following code demonstrates how to load nodes by reading the JSON data and rendering it within the diagram.

// function to import JSON data
const readJSON = (args) => {
 const file = args.target.files[0];
 if (file) {

   // Create a new FileReader to read the content
   const reader = new FileReader();
   reader.readAsText(file);
   reader.onloadend = loadDiagram;
 }
};

//Load the diagram.
const loadDiagram = (event) => {
 diagramInstance.loadDiagram(event.target.result);
};

You can find a working example of this implementation on StackBlitz in the provided link: Click here for sample

Conclusion

I hope you enjoyed learning how to render nodes by loading the JSON from database in React Diagram. You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Diagram example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!