Как отфильтровать результат в файле 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>

javascript html json rest

0

loveCoding

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) => searchName == todo.title);

      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.
      }
    });

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

2 ответа

Новые вопросы

javascript