Как правильно составить условие?

Question

[Антон]

Если таблица, которая динамически составляется из json файла, не получается нормально составить условие.
Если пусто в инпутах, то выводится ошибка, если два нуля, то выводится таблица и т.д.Получается какая-то ерунда

btn.addEventListener("click", (e) => {
  e.preventDefault();
  table.innerHTML = "";
  let from = document.querySelector(".from").value;
  let to = document.querySelector(".to").value;
  if(from === '' && to === ''){
    error.textContent = 'Нет данных, попадающих под условие фильтра';
    return;
  }else {
      fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      data.forEach((item) =>{
        if(from != '' && to != '' && item.price >= +from && item.price <= to){
          var tr = document.createElement('tr');
          tr.innerHTML = 
          '<td>' + item.name + '</td>' +
          '<td>' + item.quantity + '</td>' +
          '<td>' + item.price + '</td>' +
          '<td>' + item.quantity * item.price + '</td>';
          table.appendChild(tr);
          return;
        }
        // else if(to != '' && item.price <= to){
        //   var tr = document.createElement('tr');
        //   tr.innerHTML = 
        //   '<td>' + item.name + '</td>' +
        //   '<td>' + item.quantity + '</td>' +
        //   '<td>' + item.price + '</td>' +
        //   '<td>' + item.quantity * item.price + '</td>';
        //   table.appendChild(tr);
        //   return;
        // }
        // else if( from != '' && item.price >= from){
        //   var tr = document.createElement('tr');
        //   tr.innerHTML = 
        //   '<td>' + item.name + '</td>' +
        //   '<td>' + item.quantity + '</td>' +
        //   '<td>' + item.price + '</td>' +
        //   '<td>' + item.quantity * item.price + '</td>';
        //   table.appendChild(tr);
        //   return;
        // } 
      })
    });
  }

});

Answer 1

[Денис]

Первое, что я бы сделал, это оттримил данные из инпутов:

let from = document.querySelector(".from").value.trim();
let to = document.querySelector(".to").value.trim();

Во-вторых, нужно учесть, что данные инпутов - всегда строковые. Т.к. судя по коду вы ожидаете числовые значения, то данные можно сразу преобразовывать к этому типу:

let from = +document.querySelector(".from").value.trim();
let to = +document.querySelector(".to").value.trim();
// Можно так же использовать методы parseInt() или parseFloat()

В итоге, проверка будет такой:

if (!form && !to) {
    error.textContent = 'Нет данных, попадающих под условие фильтра';
}

P.S. Если преобразовываем к числовому типу, то тримить не обязательно

Comments

[Антон]

if (!form && !to) {
    error.textContent = 'Нет данных, попадающих под условие фильтра';
}

Если так сделать, то дальше если писать цена от: 0 то не будет работать

let from = +document.querySelector(".from").value;
  let to = +document.querySelector(".to").value;
  if(!from && !to){
    error.textContent = 'Нет данных, попадающих под условие фильтра';
    return;
  }else {
      fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      data.forEach((item) =>{
        if(from <= item.price){
          var tr = document.createElement('tr');
          tr.innerHTML = 
          '<td>' + item.name + '</td>' +
          '<td>' + item.quantity + '</td>' +
          '<td>' + item.price + '</td>' +
          '<td>' + item.quantity * item.price + '</td>';
          table.appendChild(tr);
        }
      })
    });
  }

Цель: При наличии фильтра «Цена от» и «до» - выводить только те строки, которые попадают под условия цен. В случае, когда оба поля заполнены нулями – выводить всю таблицу. В случае, если данные для вывода отсутствуют (в условия фильтра ничего не попало) – вместо таблицы выводить сообщение «Нет данных, попадающих под условие фильтра» Предусмотреть ошибки ввода.

[Денис]

Антон, если нули нужно пропускать, тогда можно так:

let from = document.querySelector(".from").value.trim();
let to = document.querySelector(".to").value.trim();
if (!from || !to || isNaN(from) || isNaN(to)) {
  error.textContent = 'Нет данных, попадающих под условие фильтра';
  return false;
}