如何动态生成嵌套选项卡？

Question

我通过json响应动态生成标签，但是在创建嵌套标签时遇到了问题。

这是我的json响应

{
"name":"tab",
"fields":[ {
      "id": 9,
      "contentType": "Tabs",
      "type": "Tab",
      "title": "Producer"
    },
    {
      "id": 11,
     "contentType": "Tab-Producer"
      "type": "TextField",
      "title": "Organization Name1 "
    }, {
      "id": 9,
      "contentType": "Tab-Producer",
      "type": "Tab",
      "title": "auto"
    },{
      "id": 11,
     "contentType": "Tab-auto"
      "type": "TextField",
      "title": "autoname1 "           
    },{
      "id": 11,
     "contentType": "Tab-auto"
      "type": "TextField",
      "title": "autoname2 "           
    },{
      "id": 11,
     "contentType": "Tab-Producer"
      "type": "TextField",
       "title": "Organization Name2 "           
    }]
}

在这里，我正在比较内容类型和标题（不包括“ Tab-”），如果基于类型的内容相同，则我要附加数据，这意味着它是文本字段，文本字段还是标签。

我的代码

createComponents(records) 
    {
        var tabName=""; var status="";
            for (var itemindex in records) 
            {           
                var jsoncomponent = records[itemindex];

                var component = new UIComponent(jsoncomponent.id, jsoncomponent.title, jsoncomponent.type);


                if(jsoncomponent.contentType!= undefined &&jsoncomponent.contentType.includes('Tab')){
                    var tabNameIndex=itemindex; 
                    var tabcontent=records[tabNameIndex]
                    if(tabName==""){
                    tabName=tabcontent.title;
                    status=tabcontent.title}
                    var indexId ;

                    if(jsoncomponent.contentType.replace(/\s/g, '').substring(4) === tabName.replace(/\s/g, '') && !jsoncomponent.type.includes('Tab'))
                    {
                        indexId= tabName;
                        $('#tabContent').append('<div id="'+indexId+'" class="row col-md-12" >');
                                generatecode(component,indexId);
                    }
                    else{
                        if(indexId!="" && indexId!=undefined &&indexId!='null'){
                                var tabId='#nav-tabs';
                                var tabSectionId='#sectionId';
                                 generateTab(tabId,tabSectionId,indexId,tabName);
                                 document.getElementById('sectionId').style.display = "block";
                            }   
                        tabName=jsoncomponent.title;

                    }

            }
                else{
                    generatecode(component,indexId);
                }
            }           

    }
function generatecode(comp,indexId) {
        var element = document.createElement("TEXTAREA");
        var node = document.createTextNode(comp.value);
        element.appendChild(node);
        element.id = comp.id;
        element.name = comp.name;
        element.setAttribute('cols',comp.addAttribMap.cols);
        element.setAttribute('rows',comp.addAttribMap.rows);
       document.getElementById(indexId).appendChild(element);
    }             



function generateTab(tabId,tabSectionId,indexId,tabName){
        var sectionData=document.getElementById(indexId).outerHTML; 
        var tabId='#nav-tabs';
        var tabSectionId='#sectionId';                                  
        $(tabId).append('<li ><a href="#tab'+tabName.replace(/\s/g, '').replace('/','')+'"class="tabBtn" >'+tabName+'</a></li>');
        $(tabSectionId).append('<section id="tab'+tabName.replace(/\s/g, '').replace('/','')+'" class="tab-content ">'+sectionData+'</section>');                                   
    }   

预期输出：