Javascript 如何使用forEach函数创建多个项目符号

这是我的代码，我需要将结果作为品种类别的单独要点显示出来。我很确定这个问题源于这样一个事实，即ul在forEach中，因此每次迭代只将品种线视为一个名称。我不知道如何解决这个问题，请帮忙

这就是你想要的结果吗

嵌套循环

您可以在另一个

.forEach（）

中执行嵌套循环（a

.forEach（）

）来循环

宠物

，并循环

宠物

中的

品种

var数据={
宠物：[
{
类型：“狗繁殖”，
名字：“狗”，
品种：[“斑点狗”、“狮子狗”、“狮子狗”]
},
{
类型：“猫繁殖”，
名称：“猫”，
品种：[“布娃娃”、“苏格兰褶皱”、“斯芬克斯”]
},
{
类型：“兔子繁殖”，
名字：“兔子”，
品种：[“荷兰罗布”、“雷克斯”、“迷你罗布”]
}
]
};
var content=document.getElementById（“内容”）
data.pets.forEach（pets=>{
设h1=document.createElement（“h1”）；
设h1text=document.createTextNode（pets.name）；
h1.追加子项（h1文本）；
内容。附属物（h1）；
设h2=document.createElement（“h2”）；
设h2text=document.createTextNode（pets.type）；
h2.追加子项（h2文本）；
内容。追加子项（h2）；
设ul=document.createElement（“ul”）
pets.breed.forEach（val=>{
设li=document.createElement（“li”）；
让text=document.createTextNode（val）；
李.附件（文本）；
ul.儿童（li）；
})
内容。儿童（ul）；
})

---

在循环外部创建

var data = {
    pets:[
        {
            type: "Dogs Breeds",
            name: "Dog",
            breed: ["Dalmation", "Poodle", "Shitzu"]
        },
        {
            type: "Cats Breeds",
            name:"Cat",
            breed:["Ragdoll", "Scottish Fold", "Sphynx"]
        },
        {
            type: "Rabbits Breeds",
            name: "Rabbit",
            breed: ["Holland Lop", "Rex", "Mini Lop"]
        }
    ]

};

var content = document.getElementById("content")


data.pets.forEach(pets => {
    let h1 = document.createElement("h1");
    let h1text = document.createTextNode(pets.name);
    h1.appendChild(h1text);
    content.appendChild(h1);

    let h2 = document.createElement("h2");
    let h2text = document.createTextNode(pets.type);
    h2.appendChild(h2text);
    content.appendChild(h2);

    let ul = document.createElement("ul")
    let li = document.createElement("li");
    let text = document.createTextNode(pets.breed);
    li.appendChild(text);
    ul.appendChild(li);
    content.appendChild(ul);
})