Javascript 遍历深度嵌套对象以生成html optgroup/options

我正在尝试获取对象的键，如果它包含子对象，则创建一个optgroup，然后为optgroup创建children选项。如果子对象也是对象，则我希望在父optgroup中嵌套另一个optgroup。下面是我的对象myTypes

let myTypes = {
    women: 
    {
        tops:
        {
            poloshirts:"polo shirts",
            tshirts: "t-shirts",
            buttondown: "button down",
            longsleeve:"long sleeve",
            vneck:"vneck",
            tanktop:"tanktop",
            blouse:"blouse",
            croptop:"croptop",
            drifit: "dri-fit",
            dressshirt:"dress shirt"
        },
        bottoms:
        {
            shorts:"shorts",
            jeans:"jeans",
            joggers:"joggers",
            skirts:"skirts",
            dresspants:"dresspants",
            leggings:"leggings"
        },
        shoes:
        {
            boots:"boots",
            sneakers: "sneakers",
            sandals:"sandals",
            flats:"flats",
            heels:"heels"
        },
        jewelry:
        {
            rings: "rings",
            bracelets:"bracelets",
            necklaces: "necklaces",
            anklets: "anklets"
        },
        sweaters: "sweaters",
        sweatshirts: "sweatshirts",
        hoodies: "hoodies",
        dresses:
        {
            sundress: "sundress",
            short: "short",
            long: "long",
            maxidress: "maxidress"
        },
        accessories:
        {
            watches:"watches",
            glasses:
            {
                sunglasses: "sunglasses",
                reading:"reading"
            },
            wallets: "wallets",
            keychains: "keychains",
            lanyards:"lanyards",
            belts:"belts",
            purses:"purses"
        }
    },
    
men: 
    {
        tops:
        {
            poloshirts:"polo shirts",
            tshirts: "t-shirts",
            buttondown: "button down",
            longsleeve:"long sleeve",
            vneck:"vneck",
            tanktop:"tanktop",
            drifit: "dri-fit",
            dressshirt: "dress shirt"
        },
        bottoms:
        {
            shorts:"shorts",
            jeans:"jeans",
            joggers:"joggers",
            dresspants:"dress pants",
            leggings:"leggings"
        },
        shoes:
        {
            boots:"boots",
            sneakers: "sneakers",
            sandals:"sandals",
            flats:"flats"
        },
        jewelry:
        {
            rings: "rings",
            bracelets:"bracelets",
            necklaces: "necklaces",
            anklets: "anklets"
        },
        sweaters: "sweaters",
        sweatshirts: "sweatshirts",
        hoodies: "hoodies",
        accessories:
        {
            watches:"watches",
            glasses:
            {
                sunglasses: "sunglasses",
                reading:"reading"
            },
            wallets: "wallets",
            keychains: "keychains",
            lanyards:"lanyards",
            belts:"belts"
        }
    },
kids: 
    {
    girl: 
        {
            tops:
            {
                poloshirts:"polo shirts",
                tshirts: "t-shirts",
                buttondown: "button down",
                longsleeve:"long sleeve",
                vneck:"vneck",
                tanktop:"tanktop",
                blouse:"blouse",
                croptop:"croptop",
                drifit: "dri-fit",
                dressshirt:"dress shirt"
            },
            bottoms:
            {
                shorts:"shorts",
                jeans:"jeans",
                joggers:"joggers",
                skirts:"skirts",
                dresspants:"dresspants",
                leggings:"leggings"
            },
            shoes:
            {
                boots:"boots",
                sneakers: "sneakers",
                sandals:"sandals",
                flats:"flats",
                heels:"heels"
            },
            jewelry:
            {
                rings: "rings",
                bracelets:"bracelets",
                necklaces: "necklaces",
                anklets: "anklets"
            },
            sweaters: "sweaters",
            sweatshirts: "sweatshirts",
            hoodies: "hoodies",
            dresses:
            {
                sundress: "sundress",
                short: "short",
                long: "long",
                maxidress: "maxidress"
            },
            accessories:
            {
                watches:"watches",
                glasses:
                {
                    sunglasses: "sunglasses",
                    reading:"reading"
                },
                wallets: "wallets",
                keychains: "keychains",
                lanyards:"lanyards",
                belts:"belts",
                purses:"purses"
            }
        },
    boy: 
        {
            tops:
            {
                poloshirts:"polo shirts",
                tshirts: "t-shirts",
                buttondown: "button down",
                longsleeve:"long sleeve",
                vneck:"vneck",
                tanktop:"tanktop",
                drifit: "dri-fit",
                dressshirt: "dress shirt"
            },
            bottoms:
            {
                shorts:"shorts",
                jeans:"jeans",
                joggers:"joggers",
                dresspants:"dress pants",
                leggings:"leggings"
            },
            shoes:
            {
                boots:"boots",
                sneakers: "sneakers",
                sandals:"sandals",
                flats:"flats"
            },
            jewelry:
            {
                rings: "rings",
                bracelets:"bracelets",
                necklaces: "necklaces",
                anklets: "anklets"
            },
            sweaters: "sweaters",
            sweatshirts: "sweatshirts",
            hoodies: "hoodies",
            accessories:
            {
                watches:"watches",
                glasses:
                {
                    sunglasses: "sunglasses",
                    reading:"reading"
                },
                wallets: "wallets",
                keychains: "keychains",
                lanyards:"lanyards",
                belts:"belts"
            }
        }
    }
}

我试着迭代这个过程，然后用适当的选项生成html选择，但我无法理解。我所知道的最远的就是这个

    let selectionHTML = "";
    let paths = (arr)=>{
        for(let i in arr){
            if(typeof arr[i] == "object" && arr[i] !== null){
                selectionHTML += "<optgroup label = '" + i + "'></optgroup>";
                paths(arr[i]);
            }
        }
    }
    paths(myTypes);

让selectionHTML=”“；
let路径=（arr）=>{
为了（让我进来）{
if（类型arr[i]=“对象”&&arr[i]！==null）{
选择HTML+=“”；
路径（arr[i]）；
}
}
}
路径（MyType）；

---

我不知道如何生成代码。

您需要知道，将

optgroup

元素嵌套在一起的方法不起作用，因为只会显示

optgroup

的第一级：

尝试使用类似的方法：

constpath=（source={}）=>{
//让初始字符串为空
让returnedString=''；
//使用键/值对将对象转换为数组，然后对其进行迭代
Object.entries（源）
.forEach（（[key，value]）=>{
if（typeof value==='object'&&value！==null）{
//值是一个对象，遍历它
returnedString+=`${path（value）}`；
}否则{
//值应为字符串
returnedString+=`${value}`；
}
});
//返回字符串
返回返回字符串；
}

此外，在操作DOM时，建议使用内置方法来操作元素而不是字符串：

//创建“根”元素
//const root=document.createElement（'select'）；
常量路径=（源={}，根元素=未定义）=>{
//如果不是元素的实例，请定义根元素
const root=rootElement-instanceof-Element？rootElement:document.createElement（'select'）；
//使用键/值对将对象转换为数组，然后对其进行迭代
Object.entries（源）
.forEach（（[key，value]）=>{
如果（typeof value==='object'&&value！==null）{//value是一个对象，则遍历它
//创建一个optgroup元素
const optgroup=document.createElement（'optgroup'）；
//定义属性
optgroup.setAttribute（'label'，key）；
//在optgroup中添加“content”
路径（值，optgroup）；
//将新创建的optgroup元素附加到根目录
root.appendChild（optgroup）；
}否则{//值应为字符串
//创建选项元素
const option=document.createElement（'option'）；
//定义属性
option.setAttribute（'value'，key）；
option.text=值；
//将新创建的option元素附加到根目录
root.appendChild（选项）；
}
});
//返回根元素
返回根；
}

编辑1：将DOM方式添加到答案中

编辑2：添加了

optgroup

嵌套的警告 函数getMyTypes（obj_myTypes）{ var targetHTML=$（“”）； for（对象类型中的常量键）{ if（obj_myTypes.hasOwnProperty（键））{ var元素=对象类型[key]； console.log（键） targetHTML.prepend（`${key}`）； //每个都在obj中 //console.log（元素） 第二步（要素） } } } getMyTypes（myTypes）； 函数stepOne（）{ var step_one=$（'optgroup'）.filter（'[id=“one”]'）； 步骤1.每个（（索引）=>{ //var result=$（this.text（）） 步骤1.前置（`two`） }); } 第一步（） 功能步骤二（obj_元素）{ var step_two=$（'optgroup'）.filter（'[id=“two”]'）； 用于（对象元素中的常量键）{ if（对象元素hasOwnProperty（键））{ _元素的var项_=obj_元素[键]； console.log（'KEY:'+KEY） 步骤2.每个（（索引，html元素）=>{ $（html\u元素）.attr（“标签”，值） console.log（值） //返回值 }); } }

---

}我认为您必须对该对象进行三次检查。在每个循环的响应中，必须将其添加到html中。