循环遍历JavaScript对象数组创建DOM元素，实现嵌套ol列表渲染

需求说明 #

现有结构为对象数组的源数据，遍历该数组时每轮迭代创建一个div元素，同时完成以下逻辑：

• 取出当前外层对象的ol属性（该属性为子对象数组）
• 为ol属性下的每个子对象在当前div内生成一个<ol>标签
• 每个<ol>内的<li>数量等于对应子对象li属性的数值，<li>的文本内容为对应子对象的title属性值

现有代码问题 #

• 错误读取i.ol_li属性，源数据中对应属性名为ol
• 缺少嵌套遍历ol属性生成对应ol/li元素的逻辑

完整可运行代码 #

JavaScript 代码 #

var array_of_objects = [
    {
        "name": "john",
        "job": "pilot",
        "email": "johnpilot@gmail.com",
        "ol": [{"li": 6,"title": "6 li's"}, {"li": 2,"title": "2 li's"}, {"li": 5,"title": "5 li's"}]
    }, 
    {
        "name": "mark",
        "job": "engineer",
        "email": "markengineer@gmail.com",
        "ol": [{"li": 2,"title": "2 li's"}, {"li": 7,"title": "7 li's"}, {"li": 2,"title": "2 li's"}, {"li": 1,"title": "1 li's"}]
    }, 
    {
        "name": "george",
        "job": "chef",
        "email": "georgechef@gmail.com",
        "ol": [{"li": 1,"title": "1 li's"}, {"li": 3,"title": "3 li's"}, {"li": 4,"title": "4 li's"}, {"li": 3,"title": "3 li's"}, {"li": 3,"title": "3 li's"}]
    }
]

function iterate(arr) {
    arr.forEach(i => {
        var name = i.name;
        var job = i.job;
        var email = i.email;
        // 生成所有ol及其内部li的HTML字符串
        var olHtml = ''
        i.ol.forEach(olConfig => {
            var liHtml = ''
            // 根据li属性值生成对应数量的li
            for(var count = 0; count < olConfig.li; count++){
                liHtml += `<li>${olConfig.title}</li>`
            }
            olHtml += `<ol>${liHtml}</ol>`
        })
        var str = `
        <div>
            <span>${name}</span>
            <span>${job}</span>
            <span>${email}</span>
            <span>${olHtml}</span>
        </div>
        `
        $("body").append(str);
    })
}

iterate(array_of_objects)

CSS 代码 #

div {
    display: flex;
    flex-direction: column;
    border: thin solid black;
    margin: 0.4em;
    padding: 0.2em;
}
span:not(:nth-child(4)) {
    display: flex;
    flex-direction: column;
    border: thin solid red;
    margin: 0.2em;
    padding: 0.2em;
}
span:nth-child(4) {
    display: flex;
    flex-direction: row;
    margin: 0.4em;
    padding: 0.2em;
}
ol {
    border: thin solid blue;
    margin: 0.2em;
}
li {
    margin: 0.2em;
}

HTML 代码 #

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

内容的提问来源于stack exchange，提问作者Vaggelis