Javascript fetch api return 200 and response but .then cant work

Question

I am trying the openweathermap API on web. The fetch is indeed return 200 ok and responses but the following .then seems to not work or inherited from fetch as I cant manipulate the received data either in console.log, alert or print to html.

It doesn't show any error or warnings. But just:

[HTTP/1.1 200 OK 637ms].

Please help me on my code. Very much appreciated.

let weatherInfo = document.getElementById("weatherInfo");

//Trigger on click on HTML 
function submitFormCheck() {

  //Check if text field contain value
  //Check if browser support Geolocation
  const txtBox = document.getElementById('textBoxx').value;
  if (txtBox == "" || txtBox.length == 0 || txtBox == null) {
    //Retrieve the location from callback and fetch api
    getLocation(function(lat_lng) {
      console.log(`longitude: ${ lat_lng.lat } | latitude: ${ lat_lng.lng }`);
      const url = 'https://api.openweathermap.org/data/2.5/forecast?lat=' + lat_lng.lat + '&lon=' + lat_lng.lng + '&APPID=075bd82caf51b82c26d704147ba475da&units=metric';
      const fetchDetails = {
        method: 'GET'
      };

      fetch(url, fetchDetails)
        .then((resp) => resp.json())
        .then((data) => {
          console.log("testing"); //console.log cant work 
          alert("testing"); //alert cant work
          let i = data.city;
          console.log(i.name); // response.data cant print out
        })
        .catch((error) => console.log(error));
    });


  } else {
    return false;
  }

  
  function getLocation(callback) {
    if (navigator.geolocation) {

      let lat_lng = navigator.geolocation.getCurrentPosition(function(position) {
        // get current location by using html 5 geolocation api
        let userPosition = {};
        userPosition.lat = position.coords.latitude;
        userPosition.lng = position.coords.longitude;
        callback(userPosition);

      }, positionHandlingError);
    } else {
      alert("Geolocation is not supported by this browser. Please enter the location manually");
    }
  }



  // if failed to get location
  function positionHandlingError(error) {
    switch (error.code) {
      case error.PERMISSION_DENIED:
        console.log("User denied the request for Geolocation.");
        break;
      case error.POSITION_UNAVAILABLE:
        console.log("Location information is unavailable.");
        break;
      case error.TIMEOUT:
        console.log("The request to get user location timed out.");
        break;
      case error.UNKNOWN_ERROR:
        console.log("An unknown error occurred.");
        break;
    }
  }

}

Answer 1

It seems you didn't prevent the default behaviour of form submitting:

function submitFormCheck(e) {

  //Prevent form submit
  e.preventDefault();

  //Check if text field contain value
  //Check if browser support Geolocation
  const txtBox = document.getElementById('textBoxx').value;

  ...