Как сделать правильное формирование запроса?

Question

[Константин]

Не работает правильно формирование запроса в этом коде:

Input.addEventListener('input', async (event) => {
  const target = event.target.value;
  
  const placeholderText = event.target.placeholder; 

  const GET = 
  await fetch(`https://sb-film.cc/films` + (placeholderText == 'Название фильма' ? `?title=${target}` : '') 
  + (placeholderText == 'Жанр' ? `?genre=${target}` : '') + (placeholderText == 'Год релиза' ? `?releaseYear=${target}` : '' )
  , {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      email: "[e-mail]",
    }   
  });
}

Должно выглядеть в строке всё вот так: "?

title=yourTitle&genre=yourGenre&releaseYear=yourReleaseYear&isWatched=(true/false если установлено поле)

."

Т.е., если я ввожу только в поле title, то title=yourTitle. Если в title и genre, то title=yourTitle&genre=yourGenre. А если в title, genre и в releaseYear, то так title=yourTitle&genre=yourGenre&releaseYear=yourReleaseYear

И т.д. Почему мой код именно так не работает? Все же правильно вроде бы сделал.

Comments

[VoidVolker]

Константин и на каком этапе отладки вашего кода у вас возникли сложности? Что именно не получается?

[GeminiX]

Input.addEventListener('input', async (event) => {
  const target = event.target.value;
  const placeholderText = event.target.placeholder;
  
  // Создаем массив для хранения параметров
  const params = [];
  
  // Добавляем параметры в зависимости от placeholder
  if (placeholderText === 'Название фильма' && target) {
    params.push(`title=${encodeURIComponent(target)}`);
  } else if (placeholderText === 'Жанр' && target) {
    params.push(`genre=${encodeURIComponent(target)}`);
  } else if (placeholderText === 'Год релиза' && target) {
    params.push(`releaseYear=${encodeURIComponent(target)}`);
  }
  
  // Формируем строку запроса
  const queryString = params.length > 0 ? `?${params.join('&')}` : '';
  
  const GET = await fetch(`https://sb-film.cc/films${queryString}`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      email: "[e-mail]",
    }   
  });
});

Answer 1

[VoidVolker]

Правильно — использовать соответствующий API: URL/searchParams
Кроме того, рекомендую ознакомиться с оператором ветвления switch.

Answer 2

[Пума Тайланд]

похоже, главная беда не в синтаксисе тернарников, а в том что event.target внутри обработчика видит только то поле, в которое сейчас печатаешь — значения двух других инпутов туда вообще не попадают. Поэтому title+genre+releaseYear никогда не соберутся вместе, как условия ни чини. И если когда-нибудь развяжешь проверки от placeholder, каждая ветка всё равно лепит свой ? вместо &.

const params = new URLSearchParams();
if (title.value) params.set('title', title.value);
if (genre.value) params.set('genre', genre.value);
if (releaseYear.value) params.set('releaseYear', releaseYear.value);
fetch(`https://sb-film.cc/films?${params}`);

и завязывайся на id полей, а не на placeholder — второе хрупко ломается при любой правке текста.

Answer 3

[Anisimov_00589]

Забудь про placeholder. Заведи state-объект {title, genre, year}. На инпутах обновляй его, а на fetch собирай строку запроса из непустых ключей

Answer 4

[alisultanovshamil]

Проблема вашего кода в том, что вы обрабатываете "только то поле, в котором происходит ввод",
а не все поля одновременно.

В обработчике input вы проверяете placeholder текущего поля и добавляете ровно один параметр
либо title
либо genre
либо releaseYear

Но вам нужно собирать значения из всех полей ввода и формировать строку запроса, содержащую все заполненные параметры, объединённые через &.

Как должно работать
- Если заполнено только поле Название → `?title=значение`
- Если заполнены «Название» и Жанр → `?title=значение&genre=значение`
- Если заполнены все три → `?title=Значение&genre=Значение&releaseYear=Значение`
- Если ничего не заполнено → без параметров (просто `https://sb-film.cc/films`)

Почему ваш текущий код не работает

const GET = await fetch(`https://sb-film.cc/films` +
(placeholderText == 'Название фильма' ? `?title=${target}` : '') +
(placeholderText == 'Жанр' ? `?genre=${target}` : '') +
(placeholderText == 'Год релиза' ? `?releaseYear=${target}` : '')
)

Здесь target это значение только текущего поля, остальные поля игнорируются.
Строка собирается из трёх тернарных операторов, но только один из них сработает (тот, чей `placeholder` совпадает), и он добавит либо `?title=...`, либо `?genre=...`, либо `?releaseYear=...`.
Два других останутся пустыми.
В результате вы никогда не получите комбинацию параметров.

Как правильно реализовать

1. Дайте каждому полю ввода уникальный идентификатор
(например, `id="title"`, `id="genre"`, `id="releaseYear"`).

2. В обработчике input (или лучше в отдельной функции, вызываемой при любом изменении) прочитайте значения из всех полей.
3. Сформируйте объект с параметрами, отфильтруйте пустые значения, затем преобразуйте в строку запроса.
4. Выполните fetch с полученным URL.

Пример кода (упрощённый)

// html

<input id="title" placeholder="Название фильма">
<input id="genre" placeholder="Жанр">
<input id="releaseYear" placeholder="Год релиза">

// JS

const titleInput = document.getElementById('title');
const genreInput = document.getElementById('genre');
const yearInput = document.getElementById('releaseYear');

// Обработчик можно повесить на все поля сразу
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('input', performSearch);
});

async function performSearch() {
  // Собираем значения
  const title = titleInput.value.trim();
  const genre = genreInput.value.trim();
  const releaseYear = yearInput.value.trim();

  // Строим объект параметров (только непустые)
  const params = {};
  if (title) params.title = title;
  if (genre) params.genre = genre;
  if (releaseYear) params.releaseYear = releaseYear;
  // Если есть поле isWatched – добавьте его аналогично

  // Преобразуем объект в строку запроса
  const queryString = new URLSearchParams(params).toString();
  const url = `https://sb-film.cc/films${queryString ? '?' + queryString : ''}`;

  try {
    const response = await fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "email": "[e-mail]",
      }
    });
    const data = await response.json();
    // обработайте данные...
  } catch (error) {
    console.error('Ошибка запроса:', error);
  }
}