如何使用迭代嵌入列表答案

【问题标题】：How to embed lists using iteration如何使用迭代嵌入列表
【发布时间】：2020-05-02 17:07:00
【问题描述】：

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

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

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

[
    {
    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);

生成的 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>

【问题讨论】：

您的代码示例不完整。以下变量不带定义使用：ul、len。以下函数不带定义使用：cNode、drawDomLi。

标签： javascript dom iteration appendchild

【解决方案1】：

我还修改了原始问题以提供答案。

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);

【讨论】：

【解决方案2】：

给你：

HTML

<body>
    <ul></ul>
</body>

JAVASCRIPT

// 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);

【讨论】：

我正在寻找一个迭代。我在数组中有无数个数组。我将尝试转换此代码。