запрос метода фильтра javascript

Question

Я пытаюсь понять метод filter в JavaScript.

У меня есть массив и с флажком и глобальной переменной, я хочу контролировать, что показать в массиве.

Если флажок не установлен и значение переменной filterTodos равно false (по умолчанию false), я хочу показать все элементы массива.Если флажок установлен, а значение переменной filterTodos равно true, я хочу показать только задачи, которые не выполнены.(completed: false)

Я знаю, что мой код для метода фильтра неверен, поскольку он ничего не делает, и когда флажок снят, он несколько раз отображает массив.

Это мойкод:

let todos = [{
  text: 'Order airline tickets',
  completed: false
}, {
  text: 'Vaccine appointment',
  completed: true
}, {
  text: 'Order Visa',
  completed: true
}, {
  text: 'Book hotell',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}]

let filterTodos = false

showTodos(todos);

function addTodo(add_todo) {
  let p = document.createElement('p')
  p.textContent = add_todo.text
  document.querySelector('body').appendChild(p)
  let checkBox = document.createElement("input")
  let label = document.createElement("label")
  checkBox.type = "checkbox"
  checkBox.value = addTodo.completed
  document.querySelector('body').appendChild(checkBox)

  //create variable to generate random id for radiobutton
  const id = Math.random().toString(36)

  checkBox.setAttribute("name", id)

  //Switch loop over the completed
  switch (add_todo.completed) {
    case true:
      checkBox.setAttribute("checked", "true") // Mark true button as checked
      break
    case false:
      checkBox.setAttribute("unchecked", "false") // Mark false button as checked
      break
    default:
      break
  }

  document.querySelector('body').appendChild(label)
  label.appendChild(document.createTextNode(add_todo.completed))
}

function showTodos(show_todos) {
  //function to show the whole object
  show_todos.forEach(function(todo) {
    addTodo(todo);
  })
}

function unComplete(uncompleteTodos) {
  unComplete.filter(!todo.completed)

}

function hideCompleted() {
  document.querySelector("#filterTodo").addEventListener('change', function(e) {

    if (document.getElementById('filterTodo').checked) {
      filterTodos = true;
      console.log(filterTodos);
      filterTodos = todos.filter(unComplete)
      unComplete(todos)
    } else {
      filterTodos = false;
      console.log(filterTodos);
      showTodos(todos)

    }
  })
}

<h1>Todos</h1>
<label style="font: bold 1.5em courier !important">
     <input type="checkbox" id="filterTodo" onChange="hideCompleted()">Hide completed
     </label><br><br>
<input id="search-todo" type="text" placeholder="Search todo">
<button id="reset-search" type="reset" value="reset" onclick="window.location.reload()">New search</button>

<div id="todos"></div>
<form action="" id="addTodo">
  <input type="text" name="inputTodo" placeholder="Insert new todo">
  <button>Add Todo</button>
</form>

<script src="js/index2.js"></script>

Answer 1

Один шаг, чтобы устранить вашу ошибку, это сделать ваш код минимально проверяемой функциональностью того, что вы хотите сделать.Тогда у вас есть довольно четкое представление о том, что происходит.Вы также можете взять лист бумаги и записать поток вашей программы.

Разбивая ваш код, мы имеем:

1. начальное назначение массива todos, filterTodos boolуправляйте var и showTodos, чтобы добавить их на страницу.
2. function addTodo: add a todo на страницу
3. function showTodos: повторяетсяtodos на вызов addTodo

К настоящему времени, мы в порядке, рассматривая только поток.Тогда имеем:

функция unComplete: просто вернуть todos массив, отфильтрованный с completed: false.Он ничего не делает с HTML

function hideCompleted: событие onchange каждого HTML-элемента todo, где, если это:

- флажок: просто вызовunComplete в результате 0 изменений в HTML .

- не проверено: снова вызывает showTodos , снова добавляя все todos к HTML .

У вас есть много способов решить эту проблему.Я показываю, возможно, самый глупый, тогда вы можете улучшить его по своему желанию:

 
let todos = [{
  text: 'Order airline tickets',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}]

init();

// ----------

function addTodo(add_todo, index) {
  let checkBox = document.createElement("input")
  checkBox.type = "checkbox"
  checkBox.id = 'chk' + index

  let label = document.createElement("label")
  label.appendChild(checkBox)
  label.innerHTML += add_todo.text

  let li = document.createElement("li")
  li.appendChild(label)

  document.getElementById('todosList').appendChild(li)
  document.getElementById(checkBox.id).checked = add_todo.completed
}

function addAllTodos(show_todos) {
  show_todos.forEach(function(todo, index) {
    addTodo(todo, index);
  })
}

function showTodo(li){
  li.style.display = 'list-item'
}
function hideTodo(li){
  li.style.display = 'none'
}

function showOnlyUncompletedTodo(li) {
  if (li.querySelector('input[type=checkbox]').checked) {
    hideTodo(li)
  }
  else {
    showTodo(li)
  }
}

function hideCompleted() {
  func = this.checked ? showOnlyUncompletedTodo : showTodo
  document.querySelectorAll('#todosList li').forEach(func)
}

function init(){
  document.getElementById("hideCompleted").addEventListener('change', hideCompleted)
  document.getElementById("btnAddTodo").addEventListener('click', function(){
    let todo = {
      text: document.getElementById('inputNewTodo').value,
      completed: false
    }

    todos.push(todo)
    addTodo(todo, todos.length - 1)
  })

  addAllTodos(todos);
}

.todos-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <h1>Todos</h1>
    <label style="font: bold 1.5em courier !important">
      <input type="checkbox" id="hideCompleted"> Hide completed
    </label><br><br>
    <input id="search-todo" type="text" placeholder="Search todo">
    <button id="reset-search" type="reset" value="reset" onclick="window.location.reload()">New search</button>

    <div id="todos"></div>
    <form id="addTodo" onsubmit="return false">
      <input type="text" id="inputNewTodo" name="inputTodo" placeholder="Insert new todo">
      <button id="btnAddTodo">Add Todo</button>
    </form>
    <br>

    <ul id="todosList" class="todos-list">

    </ul>

     <script src="script.js"></script>
  </body>
</html>

Answer 2

Метод фильтра берет все элементы массива и проходит по нему.Например:

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

Будет возвращать только элементы из массива, длина которого превышает 6.

Итак, если вы хотите: completeTodos.filter(todo => todo.completed), он будет возвращать только завершенные задачи.