JavaScript-如何显示所有对象或某些对象

我正在使用香草JavaScript创建待办事项。

我有两个过滤按钮“所有任务”和“完成的任务”。 如果单击“所有任务”，则应呈现所有数据，如果单击“完成的任务”，则仅应呈现“ isCompleted”值为true的对象。

现在，如果单击这些按钮，则可以控制台记录每个数据。但是，我无法使用这些过滤后的数据更新HTML。老实说我没头绪。我该如何工作？

const todoBlock = document.querySelector('.task__nav');
const submitForm = document.querySelector('.form');
const taskItem = document.querySelector('.task');
const taskContainer = document.querySelector('.todo__container');
const showAllTasksNav = document.querySelector('.task__nav-item.all');
const showCompletedTasksNav = document.querySelector('.task__nav-item.finished');
const taskContainer_new = document.querySelector('.items');

let todoList = [];
todoList = JSON.parse(localStorage.getItem("todolist")) || [];
updateUI();

submitForm.addEventListener('submit', (event) => {
  event.preventDefault();
  if(taskItem.value !== ' ' && taskItem.value!== '　') {
    addTodo(taskItem.value) 
  }
});

function addTodo(task) {

  const todo = {
    task: taskItem.value,
    isCompleted: false,
    id: Date.now()
  };

  todoList.push(todo);

  updateUI();
  clearInput();
}

function updateUI() {
  taskContainer_new.textContent = '';

  todoList.forEach(el => {
        showItems(el.id, el.task, el.isCompleted);
    })

    localStorage.setItem('todolist', JSON.stringify(todoList));
}

function showItems(id, task, isCompleted) {

  const markup = `
  <div class="todo__item ${isCompleted ? 'completed' : ''}" data-key="${id}">
    <p class="test">${task}</p>
    <div class="icons">
      <button class="item__complete--btn"><svg class="ion-ios-checkmark-outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M340.1 177.3L215.3 303l-47.2-47.2-17.8 17.8 56 56c2.5 2.5 5.9 4.5 8.9 4.5s6.3-2 8.8-4.4l133.7-134.4-17.6-18z" fill="#626262"/><path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm0 398.7c-105.1 0-190.7-85.5-190.7-190.7 0-105.1 85.5-190.7 190.7-190.7 105.1 0 190.7 85.5 190.7 190.7 0 105.1-85.6 190.7-190.7 190.7z" fill="#626262"/></svg></button>
      <button class="item__delete--btn"><svg class="ion-ios-close-outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M403.1 108.9c-81.2-81.2-212.9-81.2-294.2 0s-81.2 212.9 0 294.2c81.2 81.2 212.9 81.2 294.2 0s81.2-213 0-294.2zm-12.3 281.9c-74.3 74.3-195.3 74.3-269.6 0-74.3-74.3-74.3-195.3 0-269.6s195.3-74.3 269.6 0c74.4 74.3 74.4 195.3 0 269.6z" fill="#626262"/><path d="M340.2 160l-84.4 84.2-84-83.8-11.8 11.8 84 83.8-84 83.8 11.8 11.8 84-83.8 84.4 84.2 11.8-11.8-84.4-84.2 84.4-84.2z" fill="#626262"/></svg></button>
    </div>
  </div>
  `;

  taskContainer_new.insertAdjacentHTML('afterbegin', markup);  
}

taskContainer.addEventListener('click', (event) => {

  const target = event.target;
  const id = target.parentNode.parentNode.parentNode.dataset.key;

  if(target.classList.contains('ion-ios-checkmark-outline')) {
    toggleTodo(id);
  } else if (target.classList.contains('ion-ios-close-outline')) {
    deleteTodo(target);
  }
})

function clearInput() {
  taskItem.value = '';
}

function toggleTodo(key) {

  const index = todoList.findIndex(item => item.id === Number(key));  
  todoList[index].isCompleted = !todoList[index].isCompleted;

  updateUI();
}

function deleteTodo(target) {

  const targetTaskId = target.parentNode.parentNode.parentNode.dataset.key;
  const index = todoList.findIndex(item => item.id === Number(targetTaskId));

  todoList.splice(index, 1)

  updateUI();
}

showAllTasksNav.addEventListener('click', displayAllTasks);
showCompletedTasksNav.addEventListener('click', displayCompletedTask);

function displayCompletedTask() {

  showAllTasksNav.classList.remove('active');
  showCompletedTasksNav.classList.add('active');

  const filteredTasks = todoList.filter(function(value) {
    return value.isCompleted;
  })
  console.log("filteredTasks", filteredTasks)

}

function displayAllTasks() {
  showCompletedTasksNav.classList.remove('active');
  showAllTasksNav.classList.add('active');

  const allTasks = todoList.filter(function(value) {
    return value;
  })
  console.log("allTasks", allTasks);
}

    <div class="wrapper">
        <h1>To Do List</h1>
            <div class="input__area">
                <form class="form">
                    <input class="task" type="text" placeholder="Enter a task...">
                    <input class="add" type="submit" value="ADD">
                </form>
            </div>

        <div class="todo__container">
            <ul class="task__nav">
                <li class="task__nav-item all active">All Tasks</li>
                <li class="task__nav-item finished">Finished Tasks</li>
            </ul>
            <div class="items "></div>
        </div>
    </div>

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(to right, #aaffa9, #11ffbd); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #666;
}
.wrapper {
    width: 80vw;
    height: 80vh;
    margin: 0 auto;
    padding: 20px 0 0 0;
}
h1 {
    color: #fff;
    text-shadow: 2px 2px rgba(0,0,0,0.05);
    text-align: center;
}
button {
    background-color: transparent;
    border: none;
    transition: transform .1s;
    cursor: none;
    outline: none;
}
button i {
    color: #666;
    font-size: 150%;
    padding-left: 10px;
    cursor: pointer;
    outline: none;
}
button:hover {
    transform: scale(1.2);
    cursor: pointer;
}
.task__nav {
    padding: 0;
    margin: 0 0 40px 0;
    list-style: none;
}
.task__nav-item {
    cursor: pointer;
    float: right;
    font-size: 80%;
    margin-left: 20px;
}
.task__nav-item.active {
    /* color: #eb4034; */
    font-weight: bold;
}
.input__area {
    margin: 10px 0 20px 0;
    box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.05);
    width: 100%;
} 
.input__area form {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.todo__container {
    background: #fff;
    box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.05);
    padding: 20px 20px 30px 20px;
}
input {
    outline: none;
  }
input[type="text"] {
    border: none;
    width: 100%;
    padding: 10px 10px;
    box-sizing: border-box;
}
input[type="text"]::placeholder {
    color: #ccc;
}
input[type="submit"] {
    width: 20%;
    padding: 10px;
    border: none;
    background-color: #ec5757;
    color: #fff;
    font-weight: bold;
}
.todo__item {
    padding: 10px 10px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.todo__item.completed p::after {
    margin: 0 0 0 10px;
    content: "Finished!";
    color: #ec5757;
    font-weight: bold;
    font-size: 70%;
}