关于#树形结构#的问题，如何解决？NodeProperties对象里的name值如何递归出树形结构

 树形菜单里面的label值为NodeProperties对象里的name值如何递归出树形结构？
data: [{
          "TypeName": "工程",
          "TypeID": "1",
            "Children": {
              "ModelTreeItem": [{
                  "TypeName": "产品集",
                  "TypeID": "2",
                  "NodeProperties": {
                    "ProductsNode_ProductsName": "产品集"
                  },
                  "Children": {
                    "ModelTreeItem": [
                      {
                        "TypeName": "产品",
                        "TypeID": "3",
                        "NodeProperties": {
                          "ProductNode_ProductName": "平台",
                        },
                        "Children": {
                          "ModelTreeItem": [{
                            "TypeName": "文档类",
                            "TypeID": "4",
                            "NodeProperties": {
                              "DocsNode_DocsName": "文档类"
                            },
                            "Children": ""
                          }]
                        } 
                      },
                      {
                        "TypeName": "产品",
                        "TypeID": "5",
                        "NodeProperties": {
                          "InterfaceNode_InterfaceName": "1553B上-广播消息-平台定位数据",
                        },
                        "Children": {
                          "ModelTreeItem": [{
                            "TypeName": "文档类",
                            "TypeID": "6",
                            "NodeProperties": {
                              "InsertNode_DocName": "TGWTYY1702_27-1F46-0019-C1-00"
                            },
                            "Children": ""
                          }]
                        } 
                      },
                      {
                        "TypeName": "产品",
                        "TypeID": "8",
                        "NodeProperties": {
                          "PackageNode_PackageName": "工程数据包",
                        },
                        "Children": {
                          "ModelTreeItem": [{
                            "TypeName": "文档类",
                            "TypeID": "9",
                            "NodeProperties": {
                              "DataSegNode_DataSegName": "同步头",
                            },
                            "Children": {
                              "ModelTreeItem": [{
                                "TypeName": "文档类",
                                "TypeID": "10",
                                "NodeProperties": {
                                  "ParaSetNode_ParaSetDocName": "TGWTYY1702_31-LTHLED-2"
                                },
                                "Children": ""
                              }]
                            } 
                          }]
                        } 
                      },
                    ]
                  } 
                }]
            } 
        }],

该回答引用ChatGPT

您可以使用递归函数来遍历整个树形结构，并生成相应的HTML代码。以下是一个示例函数：

function generateTreeHtml(data) {
  if (!data || data.length === 0) {
    return '';
  }
  
  let html = '<ul>';
  
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    
    html += `<li><span>${node.NodeProperties.name}</span>`;
    
    if (node.Children && node.Children.ModelTreeItem) {
      html += generateTreeHtml(node.Children.ModelTreeItem);
    }
    
    html += '</li>';
  }
  
  html += '</ul>';
  
  return html;
}

此函数采用一个数据对象作为参数，该对象包含整个树形结构。函数首先检查数据对象是否为空或没有子节点，如果是，则返回空字符串。否则，函数将遍历数据对象中的每个节点，并生成相应的HTML代码。在生成HTML代码时，函数会检查节点是否具有“NodeProperties.name”属性，并将其用作标签文本。如果节点具有子节点，则函数将递归调用自身来处理子节点，并将生成的HTML代码添加到父节点的HTML代码中。

要使用此函数生成HTML代码，您只需将数据对象传递给它，然后将生成的HTML代码插入到您的页面中即可。例如：

const data = ...; // Your data object

const treeHtml = generateTreeHtml(data);

document.getElementById('myTree').innerHTML = treeHtml;

在这里，您需要为树形菜单指定一个包含ID“myTree”的HTML元素，以便将生成的HTML代码插入到其中。