0

I'm really new to this, so please forgive the bad and basic code. I'm trying to get weather Data from MetaweatherAPI once the page is loaded, so I can extract some info from the page elements. If it is not successful, my program should put a text inside the html element with id weather that informs the user there was no weather data found. I tried the following

$(window).on('load', function() {
  let date = $("#date").text();
  let location = $("#location").text();
  fetch("https://www.metaweather.com/api/location/search/?query=" + location)
    .then(response => response.json())
    .then(data => {
      let woeid = data["woeid"];
      fetch("https://www.metaweather.com/api/location/" + woeid + "/" + date + "/")
        .then(response => response.json())
        .then(data => {
          let wsn = data["weather_state_name"]
          let temp = data["the_temp"]
          let wsa = data["weather_state_abbr"]
          $("#weather").text(wsn + ", " + temp);
          $("img").attr("src", "https://www.metaweather.com/api/static/img/weather/png/" + wsa + ".png");


        })
        .catch(err => $("#weather").text("Weather Data is not yet available."))
    })
    .catch(err => $("#weather").text("Could not find weather data for " + location + "."))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

but it leaves the weather element in my html page blank. I would really appreciate any help.

Edit:

document.addEventListener("DOMContentLoaded", function() {
            console.log("inside event listener")
            requestToAPI();
        });

Edit: I get errors on the console.

GET http://localhost:8080/js/jquery-1.11.0.min.js net::ERR_ABORTED 404
util.js:179 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object.jQueryDetection (util.js:179)
    at util.js:195
    at bootstrap.min.js:6
    at bootstrap.min.js:6
jQueryDetection @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
event?id=Warum glauben Menschen an Verschwörungstheorien?:68 inside event listener
event?id=Warum glauben Menschen an Verschwörungstheorien?:38 inside api req
event?id=Warum glauben Menschen an Verschwörungstheorien?:39 Uncaught ReferenceError: $ is not defined
    at requestToAPI (event?id=Warum glauben Menschen an Verschwörungstheorien?:39)
    at HTMLDocument.<anonymous> (event?id=Warum glauben Menschen an Verschwörungstheorien?:69)
requestToAPI @ event?id=Warum glauben Menschen an Verschwörungstheorien?:39
(anonymous) @ event?id=Warum glauben Menschen an Verschwörungstheorien?:69
Ujuuchin
  • 1
  • 1
  • Any errors in console? What are some values that we can use to test with? – charlietfl Jun 28 '20 at 00:17
  • No errors in console. You could try `location = london`, then the woeid value should be `44418` and `date= 2020/06/30` – Ujuuchin Jun 28 '20 at 06:43
  • When I run that code, this error is displayed in the console: Access to fetch at 'https://www.metaweather.com/api/location/search/?query=' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. – Quentin Jun 28 '20 at 08:44
  • Yes I fixed that by using the cors workaround from heroku. It seems there are problems with getting the date from my html page though. – Ujuuchin Jun 28 '20 at 10:58
  • `JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.` you are missing a `` reference to load the jQuery script that is required for Bootstrap. These kind of errors should be solved, otherwise Javascript might not run on your page. – Kind Contributor Jun 28 '20 at 13:10

0 Answers0