0

I think this code is quite simple and self explanatory. But, I do not understand why my custom url does not succeed to retrieve the data I need. Although the la (Latitude)and lo (Longitude) are successfully being assigned and displayed…

<!DOCTYPE html>
<html lang="en">
<head>
  <title>UV Idicator</title>
  <link rel="stylesheet" href="styles.css"/>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body class="body">
  <div class="child"> 
    <h3 style=" margin: 0 0 5px 0;">The UV index at your <br>location is approximately: </h3>
    <div id="UV"></div>
    <div id="invis"></div>
  </div>
  <script>
    var uv;
    let la;
    let lo;
    var x = document.getElementById("invis");
    var div = document.getElementById('UV');
    var colorList = ["#71DFE7", "#FFCA03", "#FF5403", "#CD1818", "#753188"];
    var url;   
    
    async function getData(){
    let response = await fetch(url);
    let data = await response.json()
    uv = data.data[0].uv;
    div.innerHTML = Math.round(uv);
    if (uv<=2){
      changeBodyBg(colorList[0]);
    } else if (uv>=3 && uv<=5){
      changeBodyBg(colorList[1]);
    } else if (uv>=6 && uv<=7){
      changeBodyBg(colorList[2]);
    } else if (uv>=8 && uv<=10){
      changeBodyBg(colorList[3]);
    } else if (uv>=11){
      changeBodyBg(colorList[4]);
    }
    return;
  }
    
  function changeBodyBg(color){
    document.body.style.background = color;
  }
    
    function getLoc(){
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position){
          la = position.coords.latitude;
          lo = position.coords.longitude;
          url = "https://api.weatherbit.io/v2.0/current?" + "lat=" + la + "&lon=" + lo + "&key=Key";
          x.innerHTML = la + " "+ lo;
        });
      }
      else {
        x.innerHTML = "Can not get location";
      }
    }
    getLoc();
    getData();
  </script>
</body>
</html>

I am trying to make a website that displays the UV index at your location, to summarise. Update (no difference in result):

  <script>
    var uv;
    let la;
    let lo;
    var x = document.getElementById("invis");
    var div = document.getElementById('UV');
    var colorList = ["#71DFE7", "#FFCA03", "#FF5403", "#CD1818", "#753188"];
    var url;   
    
    async function getData(){
    await getLoc();
    let response = await fetch(url);
    let data = await response.json()
    uv = data.data[0].uv;
    div.innerHTML = Math.round(uv);
    if (uv<=2){
      changeBodyBg(colorList[0]);
    } else if (uv>=3 && uv<=5){
      changeBodyBg(colorList[1]);
    } else if (uv>=6 && uv<=7){
      changeBodyBg(colorList[2]);
    } else if (uv>=8 && uv<=10){
      changeBodyBg(colorList[3]);
    } else if (uv>=11){
      changeBodyBg(colorList[4]);
    }
    return;
  }
    
  function changeBodyBg(color){
    document.body.style.background = color;
  }
    
    async function getLoc(){
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position){
          la = position.coords.latitude;
          lo = position.coords.longitude;
          url = "https://api.weatherbit.io/v2.0/current?" + "lat=" + la + "&lon=" + lo + "&key=Key";
          x.innerHTML = la + " "+ lo;
        });
      }
      else {
        x.innerHTML = "Can not get locaiton";
      }
    }
    getData();
  </script>
‘’’
apaderno
  • 28,547
  • 16
  • 75
  • 90
Displayname
  • 1
  • 2
  • Nothing in that code waits for `url` to be assigned (asynchronously) in `getLoc` before calling `getData`. Since you seem comfortable with `async` functions, you might want to wrap `getCurrentPosition` in a promise ([details here](https://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises)) so you can make `getLoc` `async` and `await` it (and `await` `getLoc` before calling `getData`). – T.J. Crowder Dec 13 '21 at 09:11
  • Oh no, I am not comfortable with async, lol. But thank you, I will try ```await``` ```getLoc``` before calling ```getData```. – Displayname Dec 13 '21 at 09:46
  • Adding ```async``` to ```getLoc``` and then calling ```await getLoc()``` inside of ```getData``` doesn’t seem to try anything after I tried it… – Displayname Dec 13 '21 at 09:52

0 Answers0