Next.js Discord

Discord Forum

Creating a Recursive Function

Unanswered
Atlantic salmon posted this in #help-forum
Open in Discord
Atlantic salmonOP
I need help creating a recursive function, that iterates through the whole json object. Each object has a set of child nodes (nodes [ ]) as well.
How the flow works is that the function iterates through an object and then in the nodes array[], there is a reference to another object which is present in the json object which it should iterate next.
Currently in my implementation it only reads through the first object and then stops.

6 Replies

Atlantic salmonOP
{
    "ROOT": {
        "type": {
            "resolvedName": "Container"
        },
        "isCanvas": true,
        "props": {
            "background": "#F1F3F5",
            "padding": 20,
            "data-cy": "root-container"
        },
        "displayName": "Container",
        "custom": {},
        "hidden": false,
        "nodes": [
            "c4_pX_Qo5f",
            "MtK3iaK3PI",
            "VLEw2w4Z3h",
            "hzwjozkFsz",
            "sLAIBWq5Fv"
        ],
        "linkedNodes": {}
    },
    "c4_pX_Qo5f": {
        "type": {
            "resolvedName": "Container"
        },
        "isCanvas": true,
        "props": {
            "background": "#ffff",
            "padding": 0,
            "width": "100",
            "data-cy": "frame-container"
        },
        "displayName": "Container",
        "custom": {},
        "parent": "ROOT",
        "hidden": false,
        "nodes": [],
        "linkedNodes": {}
    },
    "MtK3iaK3PI": {
        "type": {
            "resolvedName": "Container"
        },
        "isCanvas": true,
        "props": {
            "background": "#ffff",
            "padding": 1,
            "box": "flex-row",
            "width": "100",
            "data-cy": "frame-container"
        },
        "displayName": "Container",
        "custom": {},
        "parent": "ROOT",
        "hidden": false,
        "nodes": [
            "IjUfoQm5o9",
            "Nx5LXcGqXQ"
        ],
        "linkedNodes": {}
    },
"IjUfoQm5o9": {
        "type": {
            "resolvedName": "Container"
        },
        "isCanvas": true,
        "props": {
            "background": "#ffff",
            "padding": 1,
            "width": "100",
            "data-cy": "frame-container",
            "justifyContent": "center"
        },
        "displayName": "Container",
        "custom": {},
        "parent": "MtK3iaK3PI",
        "hidden": false,
        "nodes": [
            "jfH3t_LSg0"
        ],
},.....
Atlantic salmonOP
export default function CraftFrame({ jsonData }) {
    const generateHtml = (nodeData: { type: any; props: any; nodes: any }) => {
      const { type, props, nodes } = nodeData;

      const attributes = props
      ? Object.entries(props)
        .map(([key, value]) => `${key}="${value}"`)
        .join(' ')
    : '';
  
      // Map custom types to standard HTML elements
      const htmlTypeMapping = {
        Container: 'div',
        Images: 'img',
        Text: 'p',
        Button: 'button', 
      };
  
      // Determine the HTML tag based on the type
      const htmlTag = htmlTypeMapping[type] || 'div';
  
      // Open the HTML tag with attributes
      let html = `<${htmlTag} ${attributes}>`;
  
      // Recursively process child nodes
    if (nodes && nodes.length > 0) {
        html += nodes.map((child) => generateHtml(child)).join('');
      }
  
      // Close the HTML tag
      html += `</${htmlTag}>`;
  
      return html;
    };
  
    if (jsonData && jsonData.ROOT) {
        console.log(jsonData);
      const rootHtml = generateHtml(jsonData.ROOT);
      console.log(rootHtml);
      return <div dangerouslySetInnerHTML={{ __html: rootHtml }} />;
    }
  
    return <div>no content</div>;
  }
This is my function that I need to implement the recursive function to
New Guinea Singing Dog
Wouldn't it be easier to have it as an array?
Then for each object in the top array, you could do like a DFS search if you want to access all the values