Как отфильтровать результат в файле Json, используя JavaScript?

Question

Я немного запутался в том, как отображать ошибку, если в файле json не найден заголовок. Вот код, который я пробовал. Все работает отлично, но когда я использую if (searchName! = Todo.name), тогда в результате отображается только ошибка независимо от того, пишется имя или нет. Пожалуйста, помогите мне. Я буду признателен.

const list = document.getElementById('list');
const userAction = async (event) => {
  event.preventDefault();
  const searchName = document.getElementById('searchName').value.trim();
  fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => response.json())
  .then(todos => {
    todos.forEach((todo) => {
      if(searchName == todo.title){
        const li = document.createElement('li'); 
        li.textContent = `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`;
        list.appendChild(li);
      } else if(searchName != todo.title)
{
 const li = document.createElement('li');
   list.textContent = `Search Result not found`;
 list.appendChild(li);

}
    });
  })
}

<form method="POST">
 <input type="text" id="searchName" class="form-control" placeholder="Lorem name">
<button  onclick="userAction(event)" class="search-icon"><img src="images/icon.png" alt="submit"></button>
  </form>

<ul id="list">

</ul>

Answer 1

const td = todos
  .filter(element => element.contain(searchName))
  .map((todo) => {
        const li = document.createElement('li'); 
        li.textContent = `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`;
        list.appendChild(li);
  })
if(td.length <= 0) {
  const li = document.createElement('li');
  list.textContent = `Search Result not found`;
  list.appendChild(li);
}

или более причудливый метод:

const td = todos
  .filter(element => element.contain(searchName))
  .map((todo) => `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`)
if(td.length <= 0) {
    td[0] = `Search Result not found`
}
td.forEach(t => list.append(`<li> ${t}</li>`))

Answer 2

Как то так.

const list = document.getElementById('list');
const userAction = async (event) => {
  event.preventDefault();
  const searchName = document
    .getElementById('searchName').value.trim();

  fetch('https://jsonplaceholder.typicode.com/todos')
    .then(response => response.json())
    .then(todos => {
      let result = todos
        .filter((todo) =>
          todo.title.includes(searchName));

      while (list.firstChild) {
        list.removeChild(list.firstChild);
      }
      
      if (result.length > 0) {
         result.forEach(todo => {
           const li = document.createElement('li'); 
           li.textContent = `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`;
           list.appendChild(li);
         });
      } else {
        // not found.
      }
  });
}

<form method="POST">
 <input type="text" id="searchName" class="form-control" placeholder="Lorem name">
<button  onclick="userAction(event)" class="search-icon"><img src="images/icon.png" alt="submit"></button>
  </form>

<ul id="list">

</ul>