How do I fetch data from a public API on form submit using vanilla JS-CodePudding

I am building a simple webpage where the user can enter a year in a text field and be presented with a list of F1 races for that year.

I am getting my data from this public API: http://ergast.com/mrd/ I need to achieve this in vanilla JS. I do not want to use jQuery.

So far I have tried the fetch method and I can console log:

fetch('http://ergast.com/api/f1/2020.json')
  .then(response => response.json())
  .then(data => console.log(data));

This shows me all the races for the year 2020.

However I need the user to input the year, which then gets queried with the API and then the results should be displayed.

The HTML looks like this:

<form>
   <label>
      <span>Full name</span>
       <input type="text" id="test" placeholder="">
    </label>
    <button type="submit" id="form-submit">
       Button
    </button>
</form>

There are many similar questions already on SO but none that have been helpful for me.

CodePudding user response：

document.querySelector("form").addEventListener('submit', (e) => {
    e.preventDefault();
    const year = document.getElementById("year-input").value
    fetch('http://ergast.com/api/f1/' year '.json')
      .then(response => response.json())
      .then(data => console.log(data)); })

CodePudding user response：

Here is one approach. You will need to think about how you want to display the data though. Many paragraphs isn't very user friendly.

let body = document.querySelector('body');

document.querySelector("form").addEventListener('submit', (e) => {
  const year = document.getElementById('year').value;
  e.preventDefault();
  fetch(`https://ergast.com/api/f1/${year}.json`)
    .then(response => response.json())
    .then(data => {
      (data.MRData.RaceTable.Races).forEach(races => {
        for(race in races) {
          let para = document.createElement('p');
          para.innerText = races[race];
          body.appendChild(para);
        }
      })
    })
  })

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form>
    <label>
       <span>Year</span>
        <input type="text" id="year" placeholder="">
     </label>
     <button type="submit" id="form-submit">
        Button
     </button>
  </form>
  <script src="./script.js"></script>
</body>
</html>

CodePudding user response：

The API URL is just a string, therefore the easiest way would be adding a button to your form and put the API call in onclick() event attribute of button.

<form>
   <label>
      <span>Full name</span>
       <input type="text" id="test">
    </label>
    <button id="form-submit" onclick="apiFetcher()">
       Fetch!
    </button>
</form>
<p id="result"></>

And the JS function:

function apiFetcher()
{
    var year = document.getElementById("test").value;
 
   fetch("http://ergast.com/api/f1/"   year   ".json")
  .then(response => response.json())
  .then(data => document.getElementById("result").innerText = data);
}

Note that there are about or more than 10 ways to get an input element's value but as for calling the API you have to concatenate the user inputted year to rest of the URL no matter how you get the value.
By not using <button type="submit"> but a simple <button> you remove the need to handle default event.

CodePudding user response：

// dom element references
const myBtn = document.getElementById("form-submit")
const myInput = document.getElementById("test")



myBtn.addEventListener("click", (event)=>{
event.preventDefault()

const text = myInput.value;

myInput.value=""

fetch(`http://ergast.com/api/f1/${text}.json`)
  .then(response => response.json())
  .then(data => {
  console.log(data)
  document.getElementById("data-here").innerText= data.MRData.RaceTable.Races[0].Circuit.Location.country;
  });
})

<form>
   <label>
      <span>Year</span>
       <input min="1980" max="2022" type="number" id="test" placeholder="" value="2020">
    </label>
    <button type="submit" id="form-submit">
       Button
    </button>
</form>

<div id="data-here"></div>