Javascript 如何使用迭代嵌入列表

这是一种通过迭代将列表嵌入列表（或您选择的任何dom）的方法。在我最初的调查中，我努力将ULs插入现有的LIs。跳下来找答案

原始问题：我试图在列表中构建一个列表。虽然我可以成功地构建父列表，但在注入子数组的迭代时却没有成功

我有一个对象数组。这些对象内部可能有对象数组。例如：

[
    {
    id: "math",
    students: [
        { 
            id: "math student a" 
        },{ 
            id: "math student b" 
        }
    ]},{
    id: "sciences",
    students: [
        { 
            id: "sci student c" 
        },{
            id: "sci student d", 
            award: [
                { 
                    id: "award a" 
                }, { 
                    id: "award b" 
                }
            ]
        }
     ]
  }
]

我想迭代地建立一个学习区域的列表，在学习区域内，学生，在学生内部，他们的成就，等等。这些是列表中的列表

下面是一个解决方案

var data = [
    {
        id: "math",
        students: [{ id: "math student a" }, { id: "math student b" }]
    },
    {
        id: "sciences",
        students: [
            { id: "sci student c" },
            { id: "sci student d", award: [{ id: "award a" }, { id: "award b" }] }
        ]
    }
];

// global loops
function _listLoop(list, cb, res) {
    if (!!!list) return;

    var len = list.length;
    var idx = 0;

    while (idx < len) {
        res = cb(list[idx], res, idx);

        idx++;
    }

    return res;
}

var drawList = function (item, collection) {

    for (var prop in item) {
        value = item[prop];

        if (Array.isArray(value)) {

            var ul = document.createElement("ul");
            var lastLi = collection.lastChild;

            lastLi.appendChild( _listLoop(value, drawList, ul) )

        } else {
            
            var li = document.createElement("li");
            li.textContent = value;
            
            collection.appendChild( li )
        }
    }

    return collection;
};

var ul = document.createElement( 'ul' );
var dom = _listLoop(data, drawList, ul);
var app = document.querySelector("#app");
app.appendChild(dom);

var数据=[
{
id:“数学”，
学生：[{id:“数学学生a”}，{id:“数学学生b”}]
},
{
id:“科学”，
学生：[
{id:“sci学生c”}，
{id:“sci学生d”，奖励：[{id:“奖励a”}，{id:“奖励b”}]}
]
}
];
//全局循环
函数_listLoop（列表、cb、res）{
如果（！！！列表）返回；
var len=list.length；
var-idx=0；
while（idx

生成的HTML就是这样

<div id="app">
    <ul>
        <li>
            math
            <ul>
                <li>math student a</li>
                <li>math student b</li>
            </ul>
        </li>
        <li>
            sciences
            <ul>
                <li>sci student c</li>
                <li>sci student d
                    <ul>
                        <li>award a</li>
                        <li>award b</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

数学

数学系学生a
数学系学生b



科学

sci学生c
sci学生d

奖励
b奖

给你：

HTML

---

我也修改了原来的问题以提供答案

var data = [
    {
        id: "math",
        students: [{ id: "math student a" }, { id: "math student b" }]
    },
    {
        id: "sciences",
        students: [
            { id: "sci student c" },
            { id: "sci student d", award: [{ id: "award a" }, { id: "award b" }] }
        ]
    }
];

// global loops
function _listLoop(list, cb, res) {
    if (!!!list) return;

    var len = list.length;
    var idx = 0;

    while (idx < len) {
        res = cb(list[idx], res, idx);

        idx++;
    }

    return res;
}

var drawList = function (item, collection) {

    for (var prop in item) {
        value = item[prop];

        if (Array.isArray(value)) {

            var ul = document.createElement("ul");
            var lastLi = collection.lastChild;

            lastLi.appendChild( _listLoop(value, drawList, ul) )

        } else {
            
            var li = document.createElement("li");
            li.textContent = value;
            
            collection.appendChild( li )
        }
    }

    return collection;
};

var ul = document.createElement( 'ul' );
var dom = _listLoop(data, drawList, ul);
var app = document.querySelector("#app");
app.appendChild(dom);

var数据=[
{
id:“数学”，
学生：[{id:“数学学生a”}，{id:“数学学生b”}]
},
{
id:“科学”，
学生：[
{id:“sci学生c”}，
{id:“sci学生d”，奖励：[{id:“奖励a”}，{id:“奖励b”}]}
]
}
];
//全局循环
函数_listLoop（列表、cb、res）{
如果（！！！列表）返回；
var len=list.length；
var-idx=0；
while（idx

您的代码示例不完整。使用以下变量时没有定义：ul、len。下面的函数没有定义：cNode，drawDomLi。我正在寻找一个迭代。数组中有无限多个数组。我将尝试转换此代码。

// Gets the ul tag in the body tag in which we will add our li tags.
var ul = document.querySelector('body > ul');

var classes = [
    { class: 'math', students: ['student a', 'student b'] },
    { class: 'science', students: ['student c', 'student d'] }
];

function fillUlElement(ulElement, classes) {

    // First we iterate over all the classes. 
    // We can't use class as variable name since that is a reserved keyword 
    // in javascript, so we are using classInfo as a variable name instead.
    classes.forEach(function (classInfo) {
        // We create a li tag that we will add to the ul tag at the end
        // of this function.
        var li = document.createElement('li');

        // We set the name of the class as text in our li tag first.
        // Be aware that textContent clears all the content in the li tag.
        // So we need to set the name of the class before we add our
        // list of students.
        li.textContent = classInfo.class;

        // Create the ul tag which will contain the li tags of students.
        var studentsUlElement = document.createElement('ul');
        classInfo.students.forEach(function (student) {
            var studentElement = document.createElement('li');
            studentElement.textContent = student;

            // Add the li tag with the student name to the ul tag of students.
            studentsUlElement.appendChild(studentElement);
        });
        // Add our ul tag which contains a list of li tags/student names.
        li.appendChild(studentsUlElement);

        // And at last add the li tag, which contains the name of the 
        // class and the ul tag with students, to the main ul tag
        ulElement.appendChild(li)
    });
};

// Passing the ul tag and the classes array into this function so we can
// do this with other ul tags and arrays with the same format as well.
fillUlElement(ul, classes);

var data = [
    {
        id: "math",
        students: [{ id: "math student a" }, { id: "math student b" }]
    },
    {
        id: "sciences",
        students: [
            { id: "sci student c" },
            { id: "sci student d", award: [{ id: "award a" }, { id: "award b" }] }
        ]
    }
];

// global loops
function _listLoop(list, cb, res) {
    if (!!!list) return;

    var len = list.length;
    var idx = 0;

    while (idx < len) {
        res = cb(list[idx], res, idx);

        idx++;
    }

    return res;
}

var drawList = function (item, collection) {

    for (var prop in item) {
        value = item[prop];

        if (Array.isArray(value)) {

            var ul = document.createElement("ul");
            var lastLi = collection.lastChild;

            lastLi.appendChild( _listLoop(value, drawList, ul) )

        } else {
            
            var li = document.createElement("li");
            li.textContent = value;
            
            collection.appendChild( li )
        }
    }

    return collection;
};

var ul = document.createElement( 'ul' );
var dom = _listLoop(data, drawList, ul);
var app = document.querySelector("#app");
app.appendChild(dom);