CODEWITHSUNDEEP
javascriptreactjsnpmfetchopenweathermap
ByteTheBits
ByteTheBits

Reputation: 329

How to obtain Open Weather API date/time from city being fetched?

I'm creating a simple weather React app using the Open Weather API. I'm also using an external library for the weather icons.

A user inputs the city name and gets the current temperature with specific icon depending on the description.

My issue is that there is no way to tell if it's night or day, which would be specific to the icon that needs to display.

I get that the Unix time stamp from the data, is being fetched for the city, but when I convert it, shows up the local time. There's also a timezone offset, but from my understanding cannot be converted to a city name in JavaScript. I've checked for npm packages but unable to find one. I want to be able to grab the date/time for the specific city that is being searched, not my local time.

Should I just move on to another API? Below is the data being pulled from London:

{coord: {…}, weather: Array(1), base: "stations", main: {…}, visibility: 10000, …}
base: "stations"
clouds: {all: 40}
cod: 200
coord: {lon: -0.13, lat: 51.51}
dt: 1592155233
id: 2643743
main: {temp: 71.8, feels_like: 66.69, temp_min: 71.01, temp_max: 73, pressure: 1014, …}
name: "London"
sys: {type: 1, id: 1414, country: "GB", sunrise: 1592106173, sunset: 1592165939}
timezone: 3600
visibility: 10000
weather: Array(1)
0: {id: 802, main: "Clouds", description: "scattered clouds", icon: "03d"}
length: 1
__proto__: Array(0)
wind: {speed: 9.17, deg: 170}

Upvotes: 1

Views: 23686

Answers (8)

enrico
enrico

Reputation: 71

as suggested before you can obtain night/day information reading the icon name the api gives you, and check if the last word is d (for day) or n (for night).

Another solution could be check if the current time is between sunrise and sunset.

Here's the the code for the first solution using weather icons:

<i class="wi wi-owm-${data.weather[0].icon.at(-1) === `d` ? `day-` + data.weather[0].id : `night-` + data.weather[0].id} display-1"></i>

Here's the code for the second solution using weather icons:

<i class="wi wi-owm-${new Date(data.sys.sunrise * 1000).getTime() <= new Date().getTime() && new Date(data.sys.sunset * 1000).getTime() > new Date().getTime() ? `day-` + data.weather[0].id : `night-` + data.weather[0].id} display-1"></i>

note that we're not using data.dt because is not the current date but the date the weather data was collected, so we have to add the milliseconds to the date given by the api to compare with the ISO 8601 we get from new Date().

Upvotes: 0

Aklile SUP
Aklile SUP

Reputation: 1

Look at the following function:

function currentTime(timezoneIn, dtIn) {
    let dateTime = new Date(dtIn * 1000 + (timezoneIn * 1000));

    // Convert into 24-hour format
    let hour = (dateTime.getHours() % 12) - 3;
    let ampm = hour >= 12 ? 'pm' : 'am';

    let minutes = dateTime.getMinutes();
    let weekday = dateTime.toLocaleString('default', { weekday: 'long' });
    let month = dateTime.toLocaleString('default', { month: 'short' });
    let date = dateTime.getDate();
    
    return `${hour} : ${minutes} ${ampm} - ${weekday} , ${month} ${date}`; 
}

console.log(currentTIme(timezone, dt)); // 6:40 am - Sunday, Sep 25

Upvotes: 0

justCozz
justCozz

Reputation: 91

All credit to ByteTheBits's answer, I just cleared up the function for clarity, and I can't comment under because I lack rep.

One change I made was that since the return date object will still show the local timezone, I split the output and returned the time alone.

export const getTime = (timezone: number) => {
  const localTime = new Date().getTime()
  const localOffset = new Date().getTimezoneOffset() * 60000
  const currentUtcTime = localOffset + localTime
  const cityOffset = currentUtcTime + 1000 * timezone
  const cityTime = new Date(cityOffset).toTimeString().split(' ')
  return { time: cityTime[0] }
}

Upvotes: 0

Dan
Dan

Reputation: 91

If your main concern is about whatever the icons are shown as day or night time when the API already has a built-in set of icons and data to determine wherever it's day time or night time, which is used to see which icon fits. Here is the list of icons from here OpenWeatherMap Weather Conditions. If you go to the JSON file you'll see at the top something like "icon": "04n", in the "weather" array. That n (Like in this particular example) determines wherever to display a night or a day icon. In order to actually display the icon is a bit of a different story, basically what 'ought to be done is something like. Creating an image element in the HTML, and then using DOM and changing its src attribute based on what the API is sending.

Upvotes: 0

mplungjan
mplungjan

Reputation: 177786

They gave you a timezone:

const obj = {
  dt: 1592155233,
  id: 2643743,
  main: {
    temp: 71.8,
    feels_like: 66.69,
    temp_min: 71.01,
    temp_max: 73,
    pressure: 1014,
  },
  name: "London",
  sys: {
    type: 1,
    id: 1414,
    country: "GB",
    sunrise: 1592106173,
    sunset: 1592165939
  },
  timezone: 3600
}
console.log(new Date(obj.dt*1000-(obj.timezone*1000))); // minus 
console.log(new Date(obj.dt*1000+(obj.timezone*1000))); // plus

Upvotes: 3

ByteTheBits
ByteTheBits

Reputation: 329

I figured out how to obtain the correct time, from the specific city that the data is being fetched from. Open Weather displays the timezone in seconds. For the example I will use Atlanta, Georgia's time Offset of -14400. See below:

d = new Date()
localTime = d.getTime()
localOffset = d.getTimezoneOffset() * 60000
utc = localTime + localOffset
var atlanta = utc + (1000 * -14400)
nd = new Date(atlanta)

// Mon Jun 15 2020 17:07:59 GMT-0700

Basically followed these steps:

  1. Obtain current local time
  2. Find local time offset
  3. Obtain current UTC time
  4. Obtain destination city's offset in hours and convert to milliseconds
  5. convert to readable format

Upvotes: 3

Philippe Talarico
Philippe Talarico

Reputation: 59

You can get the current time by using the timezone in the data returned by the API. The Open Weather API documentation describe it as the following:

  • timezone : Shift in seconds from UTC

Upvotes: 0

Transformer
Transformer

Reputation: 7429

I believe you maybe thinking about this the wrong way.

You have to query the weather for the time frames you want, how else would it know which weather period are you asking.

So, in your query you have to supply the period for which you want the weather and which location. Now, if you leave that out, its always defaulting to the current period weather.

For e.g. your call should be this - 

// modify it your needs with version, city, API etc
http://history.openweathermap.org/data/2.5/history/city?[location]&type=hour&start={start}&cnt={cnt}&appid={YOUR_API_KEY}

Now when you get your response, you can associate it with city and date time that you are seeking!

Upvotes: 0

Related Questions