使用纯 JavaScript 循环嵌套对象数组时出错

大佬教程收集整理的这篇文章主要介绍了使用纯 JavaScript 循环嵌套对象数组时出错，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用纯 JavaScript 循环嵌套对象数组时出错？

我想使用 JavaScript 显示对象值的任务数组（如下所示）。当我遍历任务数组并渲染元素时，没问题。但我想在外循环内循环来显示每个任务的子任务。但是，如果我按照下面给出的每个子任务循环，那么它会在控制台中抛出错误 @H_403_1@task.subTasks.forEach(...) is not a function

@H_403_1@const tasks = [
  {
    ID: 0,description: "task 1",subTasks: [
      { ID: 0,description: "subtask 1" },{ ID: 1,description: "subtask 2" },],},{
    ID: 1,description: "task 2",description: "subtask 3" },description: "subtask 4" },{
    ID: 2,description: "task 3",description: "sub task 5" },description: "sub task 6" },];

const accordion = document.querySelector("#accordion");

function displayTasks() {
  tasks.forEach((task,index) => {
    let HTML = `
        <div class="accordion-item" ID="${index}">
            <div class="todo-task">
                <i class="far fa-circle"></i>
                <input value="${task.description}" placeholder="Update your task" type="text">
                <i class="fas fa-pen"></i>
                <i class="fa fa-trash"></i>
                <a href="#${index}"><i class="fas fa-chevron-down"></i></a>
            </div>
            <div class="todo-sub-tasks">
            `
            task.subTasks.forEach((item,index)=>{
                <div class="todo-sub-task">
                    <i class="far fa-circle"></i>
                    <input placeholder="Update your sub task" type="text" />
                    <i class="fas fa-pen"></i>
                    <i class="fa fa-trash"></i>
                </div>
                
            })
            `
            </div>
        </div>
        `;
    accordion.insertAdjacentHTML("beforeend",HTML);
  });
}

displayTasks();

解决方法

const tasks = [{
    id: 0,description: "task 1",subTasks: [
        { id: 0,description: "subtask 1" },{ id: 1,description: "subtask 2" }
    ]
},{
    id: 1,description: "task 2",description: "subtask 3" },description: "subtask 4" }
    ]
},{
    id: 2,description: "task 3",description: "sub task 5" },description: "sub task 6" }
    ]
}];

const accordion = document.querySelector("#accordion");

function displayTasks() {
    const html = tasks.map((task,index) => {
        let taskHTML = `
            <div class="accordion-item" id="${index}">
                <div class="todo-task">
                    <i class="far fa-circle"></i>
                    <input value="${task.description}" placeholder="Update your task" type="text">
                    <i class="fas fa-pen"></i>
                    <i class="fa fa-trash"></i>
                    <a href="#${index}"><i class="fas fa-chevron-down"></i></a>
                </div>
                <div class="todo-sub-tasks">
        `;
        taskHTML += task.subTasks.map((subTask) => (`
                    <div class="todo-sub-task">
                        <i class="far fa-circle"></i>
                        <input value="${subTask.description}" placeholder="Update your sub task" type="text" />
                        <i class="fas fa-pen"></i>
                        <i class="fa fa-trash"></i>
                    </div>
        `));
        taskHTML += `
                </div>
            </div>
        `;
        return taskHTML;
    });
    accordion.insertAdjacentHTML("beforeend",html);
}

displayTasks();

<div id="accordion"></div>

大佬总结

以上是大佬教程为你收集整理的使用纯 JavaScript 循环嵌套对象数组时出错全部内容，希望文章能够帮你解决使用纯 JavaScript 循环嵌套对象数组时出错所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。