使用纯javascript循环嵌套对象数组时出错答案

【问题标题】：Error while looping nested array of objects using pure javascript使用纯javascript循环嵌套对象数组时出错
【发布时间】：2021-08-22 17:38:10
【问题描述】：

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

const tasks = [
  {
    id: 0,
    description: "task 1",
    subTasks: [
      { id: 0, description: "subtask 1" },
      { id: 1, description: "subtask 2" },
    ],
  },
  {
    id: 1,
    description: "task 2",
    subTasks: [
      { id: 0, description: "subtask 3" },
      { id: 1, description: "subtask 4" },
    ],
  },
  {
    id: 2,
    description: "task 3",
    subTasks: [
      { id: 0, description: "sub task 5" },
      { id: 1, 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();

【问题讨论】：

请使用map() 而不是forEach。 forEach 不返回任何值。
是的，我已经改变了。仍然抛出错误。
您的html 变量应该在map() 调用之外声明。您需要将map() 调用的结果提供给您的html 变量。

标签： javascript html css dom

【解决方案1】：

您的html 变量需要在循环调用之外声明，以便您可以将循环结果输入其中。

下面的示例中使用了一个内部变量来编译每个任务所需的 HTML。

const tasks = [{
    id: 0,
    description: "task 1",
    subTasks: [
        { id: 0, description: "subtask 1" },
        { id: 1, description: "subtask 2" }
    ]
}, {
    id: 1,
    description: "task 2",
    subTasks: [
        { id: 0, description: "subtask 3" },
        { id: 1, description: "subtask 4" }
    ]
}, {
    id: 2,
    description: "task 3",
    subTasks: [
        { id: 0, description: "sub task 5" },
        { id: 1, 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();

&lt;div id="accordion"&gt;&lt;/div&gt;

【讨论】：