Converting Wind direction from degrees to text

Question

I'm building this weatherapp for a project and the api is returning the wind direction in degrees and i want to convert it into to text Nort,northeast etc.

This is the code that im using

   const api = {
        key: "",
        base: "https://api.openweathermap.org/data/2.5/"
      }

      const searchbox = document.querySelector('.search-box');
      searchbox.addEventListener('keypress', setQuery);

      function setQuery(evt) {
        if (evt.keyCode == 13) {
          getResults(searchbox.value);
        }
      }

      function getResults (query) {
        fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
          .then(weather => {
            return weather.json();
          }).then(displayResults);
      }

      function displayResults (weather) {
        console.log(weather);
        let city = document.querySelector('.location .city');
        city.innerText = `${weather.name}, ${weather.sys.country}`;

        let now = new Date();
        let date = document.querySelector('.location .date');
        date.innerText = dateBuilder(now);

        let temp = document.querySelector('.current .temp');
        temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`;

        let weather_el = document.querySelector('.current .weather');
        weather_el.innerText = weather.weather[0].main;

        let hilow = document.querySelector('.hi-low');
        hilow.innerText = `${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c`;

        let pressure = document.querySelector('.current .pressure');
        pressure.innerHTML =`${weather.main.pressure}<span> </span><span>PSi</span>`;

        let wind = document.querySelector('.current .wind');
        wind.innerHTML= `${weather.wind.speed} m/s`;

        let deg = document.querySelector('.current .deg')
        deg.innerText=`${weather.wind.deg}`;
      }

      function dateBuilder (d) {
        let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

        let day = days[d.getDay()];
        let date = d.getDate();
        let month = months[d.getMonth()];
        let year = d.getFullYear();

        return `${day} ${date} ${month} ${year}`;
      }

This line is returning the degrees

let deg = document.querySelector('.current .deg')
        deg.innerText=`${weather.wind.deg}`;

Is there an easy way to convert it?

How many compass points do you want to approximate? 4 (N,E,S,W), 8 (N, NE, E, SE, ...), more? — Phil, Apr 07 '20 at 09:50

score 5 · Answer 1 · answered Apr 07 '20 at 09:55

5

You can get the amount of degrees and turn it into the index of all directions. Basically turning 0-360 into 0-8, rounding to ensure a whole number. Then you have an index to use in an array of all directions.

// Insert the amount of degrees here
degrees = 10;

// Define array of directions
directions = ['north', 'northeast', 'east', 'southeast', 'south', 'southwest', 'west', 'northwest'];

// Split into the 8 directions
degrees = degrees * 8 / 360;

// round to nearest integer.
degrees = Math.round(degrees, 0);

// Ensure it's within 0-7
degrees = (degrees + 8) % 8

console.log(directions[degrees])

answered Apr 07 '20 at 09:55

Daniel_I_Am

196
1
5

Thank you! do i implement this in a function or? – zelloe Apr 07 '20 at 10:08
Probably easiest to add a new function to your script, something like `convertDegreesToWindDirection(degrees)` to take in the amount in degrees and then return the string of the wind direction. Then you can just call it in your template string with `convertDegreesToWindDirection(weather.wind.deg)` – Daniel_I_Am Apr 07 '20 at 20:51
This answer is much better https://stackoverflow.com/a/7490772/9077800 – aquiseb Dec 10 '21 at 22:14

Converting Wind direction from degrees to text

1 Answers1