Javascript API FETCH With CLICK Event Listener: TypeError: NetworkError when attempting to fetch resource

user_3239115 0
Viewed 1523

I want to click a button to display API data using JavaScript Fetch but I'm getting trouble with TypeError: NetworkError when attempting to fetch resource.

I think it has to do with the HTML form. If someone can help me with this. I'm trying to fetch data from NASA APIs.

The JS Code is below

var search = document.getElementById("search");
 search.addEventListener("click",function(){
 //var startdate = document.getElementById("starter");
 //var enddate = document.getElementById("enddate");
 var url = "https://api.nasa.gov/planetary/apod?api_key=key"; 
  fetch(url,{
      method:"GET",
      headers:{
          "Content-Type":"application/json"
      },
      mode:"cors",
      catch:"default"
  }).then(function(response){
       if(response.ok){
           return response.json();
       }else{
           throw new Error(Error);
       }
   }).then(function(data){
       console.log(data);
   }).catch(function(error){
       console.log(error);
   });
 });

Below is the HTML form

<form>
 <input type="date" id="startdate" placeholder="enter a start date"><br>
<input type="date" id="enddate" placeholder="enter a start date"><br>
<button type="submit" id="search">Search</button>
</form>

Thanks

fetch-api addeventlistener html javascript
2 Answers

Try this, I have added event.preventDefault() this will prevent the page from refreshing. Also do not forget to use the proper API key provided by the service provider.

 var search = document.getElementById("search");
 search.addEventListener("click",function(event){
 event.preventDefault();
 //var startdate = document.getElementById("starter");
 //var enddate = document.getElementById("enddate");
 var url = "https://api.nasa.gov/planetary/apod?api_key=key"; 
  fetch(url,{
      method:"GET",
      headers:{
          "Content-Type":"application/json"
      },
      mode:"cors",
      catch:"default"
  }).then(function(response){
       if(response.ok){
           return response.json();
       }else{
           throw new Error(Error);
       }
   }).then(function(data){
       console.log(data);
   }).catch(function(error){
       console.log(error);
   });
 });

user_88350660

You don't need options for your fetch request, Also you need to prevent the page from reload

Here is a full working example

var search = document.getElementById("search");
search.addEventListener("click", function(e) {
  e.preventDefault();
  fetch("https://api.nasa.gov/planetary/apod?api_key=key_obtained_from_nasa")
    .then(function(response) {
      if (response.ok) {
        return response.json();
      }
      throw new Error();
    }).then(result => console.log(result))
    .catch(function(response) {
      console.log('Error! Please try again');
    });
})
<form>
  <input type="date" id="startdate" placeholder="enter a start date"><br>
  <input type="date" id="enddate" placeholder="enter a start date"><br>
  <button type="submit" id="search">Search</button>
</form>

user_29519330
Related