Блог

Главная - Вопросы по программированию - Ошибка при зацикливании вложенного массива объектов с использованием чистого javascript

Ошибка при зацикливании вложенного массива объектов с использованием чистого javascript

#javascript #html #css #dom

Вопрос:

Я хочу отобразить массив значений объектов(приведенных ниже) с помощью 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();

Комментарии:

1. Пожалуйста, используйте map() вместо forEach . forEach не возвращает никакого значения.

2. Да, я изменился. Все еще бросаю ошибку.

3. Ваша html переменная должна быть объявлена вне map() вызова. Вам нужно передать результат map() вызова в вашу html переменную.

Ответ №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(); 
 <div id="accordion"></div>
Метки: