Блог

Можно ли выполнить вызов API при изменении значения поля выбора? Идея состоит в том, чтобы просто иметь поле выбора, полное разных лет, и когда вы выбираете новый год, результаты на странице меняются. Мой Код:

 const yearSelector = document.querySelector('#yearSelect');

function getConstructorStandings(year) {
    fetch(`http://ergast.com/api/f1/${year}/constructorStandings.json`, {
        "method": "GET",
    })
    .then(response => response.json())
    .then(data => {
        if(data.MRData.StandingsTable.StandingsLists.length > 0) {
            const { ConstructorStandings } = data.MRData.StandingsTable.StandingsLists[0];
            ConstructorStandings.forEach((C) => {
                const team = C.Constructor;
                const constructor = new Constructor(team.name, C.points, team.constructorId);
                constructor.getConstructorScore();
            })
        }
    })
    .catch(err => {
        console.error(err);
    });
}
yearSelector.addEventListener('change', function(e) {
    getConstructorStandings(e.target.value);
});
 

Спасибо, Адам

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

 const character = document.getElementById('character');

character.addEventListener('change', () => {
  fetch(`https://rickandmortyapi.com/api/character/${character.value}`)
    .then(res => res.json())
    .then(res =>{
      $('#data').html(`
        <p>Name: ${res.name}</p>
        <p>Status: ${res.status}</p>
        <p>Gender: ${res.gender}</p>
        <p>Species: ${res.species}</p>
        <p>Location: ${res.location.name}</p>
      `)
    })
    .catch(err => console.error(err))
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="character">
  <option selected></option>
  <option value="1">Rick</option>
  <option value="2">Morty</option>
  <option value="3">Summer</option>
  <option value="4">Beth</option>
</select>

<div id="data" style="margin: 2rem;">
</div>