javascript - 如何显示基于当前时间的每小时天气数据？(How to display Hourly Weather data based on Current Hour?)

Question

In my weather project, I have hourly weather data.

(在我的天气项目中，我有每小时的天气数据。)

To get a particular city hourly data it needs the timezone that has current timing and then it can display data based on that hour.

(要获取特定城市的每小时数据，它需要具有当前时间的时区，然后可以基于该小时显示数据。)

See below code for better understanding.

(请参阅以下代码，以更好地理解。)

HourlyForecast.js

(HourlyForecast.js)

export class HourlyForecast extends Component {
    constructor(props) {
        super(props);
        this.state = {};  
    }
    render() {
        const { data } = this.props;       

        if(!data) return null; 
        const time = data.datetime
        const time2 = time.slice(11,13)
        console.log('HOURLY DATA', time2)

        const time5  = moment.tz(this.props.timezone).format('HH:mm').slice(0,2)
        console.log('TIME CURRENT', time5);
    }
}

export default HourlyForecast

I get both values ie Hourly Time as well as Current Time.

(我得到两个值，即小时时间和当前时间。)

I want to display data based on current hour of the particular city input.

(我想显示基于特定城市输入的当前时间的数据。)

Like for eg In London, UK current time is 04 AM and Hourly data that ranges from 02 - 22 (From 2 AM till 10 PM).

(例如，在伦敦，英国当前时间是04 AM，每小时数据的范围是02-22（从2 AM到10 PM）。)

Now I want to display Weather data from 04 - 09 (From 04 AM till 09 AM).

(现在，我想显示04-09（从04 AM到09 AM）的天气数据。)

How to do it?

(怎么做？)

See above image for reference.The data is of Moscow, Russia.

(请参阅上图以供参考。数据来自俄罗斯莫斯科。)

Hourly data I get from weather API ranges from 00 to 09 and current timing hour is 02. So how to match with hourly data and show only 5 elements ie 02 to 07. Any suggestion highly appreciated.

(我从天气API获得的每小时数据的范围是00到09，而当前的计时时间是02。因此如何与每小时数据进行匹配并仅显示5个元素（即02到07）。任何建议都值得赞赏。)

Sample JSON data

(样本JSON数据)

DATA HOURLY {"data":[{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T07:00:00","pres":991.986,"solar_rad":8.646,"ozone":239.927,"weather":{"icon":"s05d","code":611,"description":"Sleet"},"wind_gust_spd":6.99104,"timestamp_local":"2019-11-29T10:00:00","snow_depth":1,"clouds":100,"ts":1575010800,"wind_spd":2.9362,"pop":15,"wind_cdir_full":"south-southeast","slp":1010.18,"dni":400.98,"dewpt":-0.3,"snow":0.499994,"uv":0.733082,"wind_dir":157,"clouds_hi":6,"precip":0.1015625,"vis":24.1352,"dhi":44.95,"app_temp":-4.8,"datetime":"2019-11-29:07","temp":0.1,"ghi":86.46,"clouds_mid":0,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T08:00:00","pres":991.621,"solar_rad":14.544,"ozone":237.329,"weather":{"icon":"s05d","code":611,"description":"Sleet"},"wind_gust_spd":7.2302,"timestamp_local":"2019-11-29T11:00:00","snow_depth":1,"clouds":100,"ts":1575014400,"wind_spd":3.02753,"pop":15,"wind_cdir_full":"south-southeast","slp":1009.79,"dni":514.77,"dewpt":-0.2,"snow":0.0676169,"uv":0.754683,"wind_dir":157,"clouds_hi":45,"precip":0.01123046875,"vis":24.1348,"dhi":56.99,"app_temp":-4.6,"datetime":"2019-11-29:08","temp":0.3,"ghi":145.44,"clouds_mid":0,"clouds_low":100},{"wind_cdir":"SSE","rh":98,"pod":"d","timestamp_utc":"2019-11-29T09:00:00","pres":991.014,"solar_rad":17.402,"ozone":239.801,"weather":{"icon":"c04d","code":803,"description":"Overcast clouds"},"wind_gust_spd":7.35617,"timestamp_local":"2019-11-29T12:00:00","snow_depth":1,"clouds":100,"ts":1575018000,"wind_spd":3.0718,"pop":0,"wind_cdir_full":"south-southeast","slp":1009.17,"dni":556.24,"dewpt":0,"snow":0,"uv":0.765051,"wind_dir":153,"clouds_hi":91,"precip":0,"vis":24.1347,"dhi":61.75,"app_temp":-4.3,"datetime":"2019-11-29:09","temp":0.5,"ghi":174.02,"clouds_mid":5,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T10:00:00","pres":990.086,"solar_rad":16.655,"ozone":241.9,"weather":{"icon":"c04d","code":803,"description":"Overcast clouds"},"wind_gust_spd":8.48581,"timestamp_local":"2019-11-29T13:00:00","snow_depth":0.9,"clouds":100,"ts":1575021600,"wind_spd":3.54776,"pop":0,"wind_cdir_full":"south-southeast","slp":1008.2,"dni":546.02,"dewpt":0.4,"snow":0,"uv":0.758712,"wind_dir":156,"clouds_hi":100,"precip":0,"vis":24.1352,"dhi":60.55,"app_temp":-3.9,"datetime":"2019-11-29:10","temp":0.8,"ghi":166.55,"clouds_mid":77,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T11:00:00","pres":989.655,"solar_rad":12.441,"ozone":243.157,"weather":{"icon":"c04d","code":803,"description":"Overcast clouds"},"wind_gust_spd":8.51729,"timestamp_local":"2019-11-29T14:00:00","snow_depth":0.8,"clouds":100,"ts":1575025200,"wind_spd":3.46162,"pop":15,"wind_cdir_full":"south-southeast","slp":1007.74,"dni":479.49,"dewpt":0.5,"snow":0,"uv":0.739715,"wind_dir":155,"clouds_hi":90,"precip":0.0009765625,"vis":24.135,"dhi":53.1,"app_temp":-3.7,"datetime":"2019-11-29:11","temp":1,"ghi":124.41,"clouds_mid":100,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T12:00:00","pres":989.567,"solar_rad":5.697,"ozone":243.842,"weather":{"icon":"c04d","code":803,"description":"Overcast clouds"},"wind_gust_spd":8.7108,"timestamp_local":"2019-11-29T15:00:00","snow_depth":0.7,"clouds":100,"ts":1575028800,"wind_spd":3.64744,"pop":0,"wind_cdir_full":"south-southeast","slp":1007.63,"dni":318.85,"dewpt":0.6,"snow":0,"uv":0.723368,"wind_dir":155,"clouds_hi":67,"precip":0,"vis":24.1347,"dhi":36.99,"app_temp":-3.5,"datetime":"2019-11-29:12","temp":1.1,"ghi":56.97,"clouds_mid":90,"clouds_low":100},{"wind_cdir":"SSE","rh":96,"pod":"n","timestamp_utc":"2019-11-29T13:00:00","pres":989.334,"solar_rad":0,"ozone":246.029,"weather":{"icon":"c04n","code":803,"description":"Overcast clouds"},"wind_gust_spd":9.00091,"timestamp_local":"2019-11-29T16:00:00","snow_depth":0.6,"clouds":100,"ts":1575032400,"wind_spd":3.77559,"pop":0,"wind_cdir_full":"south-southeast","slp":1007.39,"dni":0,"dewpt":0.6,"snow":0,"uv":0,"wind_dir":156,"clouds_hi":65,"precip":0,"vis":24.1349,"dhi":0.25,"app_temp":-3.4,"datetime":"2019-11-29:13","temp":1.2,"ghi":0,"clouds_mid":79,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"n","timestamp_utc":"2019-11-29T14:00:00","pres":988.535,"solar_rad":0,"ozone":249.188,"weather":{"icon":"c04n","code":803,"description":"Overcast clouds"},"wind_gust_spd":9.57769,"timestamp_local":"2019-11-29T17:00:00","snow_depth":0.5,"clouds":100,"ts":1575036000,"wind_spd":4.034,"pop":0,"wind_cdir_full":"south-southeast","slp":1006.58,"dni":0,"dewpt":0.6,"snow":0,"uv":0,"wind_dir":152,"clouds_hi":15,"precip":0,"vis":24.135,"dhi":0,"app_temp":-3.5,"datetime":"2019-11-29:14","temp":1.1,"ghi":0,"clouds_mid":84,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"n","timestamp_utc":"2019-11-29T15:00:00","pres":987.8,"solar_rad":0,"ozone":248.493,"weather":{"icon":"c04n","code":803,"description":"Overcast clouds"},"wind_gust_spd":9.95356,"timestamp_local":"2019-11-29T18:00:00","snow_depth":0.4,"clouds":100,"ts":1575039600,"wind_spd":4.16085,"pop":0,"wind_cdir_full":"south-southeast","slp":1005.83,"dni":0,"dewpt":0.7,"snow":0,"uv":0,"wind_dir":153,"clouds_hi":100,"precip":0,"vis":24.1351,"dhi":0,"app_temp":-3.5,"datetime":"2019-11-29:15","temp":1.1,"ghi":0,"clouds_mid":80,"clouds_low":98},{"wind_cdir":"SSE","rh":97,"pod":"n","timestamp_utc":"2019-11-29T16:00:00","pres":987.123,"solar_rad":0,"ozone":249.409,"weather":{"icon":"c04n","code":803,"description":"Overcast clouds"},"wind_gust_spd":10.4871,"timestamp_local":"2019-11-29T19:00:00","snow_depth":0.4,"clouds":98,"ts":1575043200,"wind_spd":4.36438,"pop":15,"wind_cdir_full":"south-southeast","slp":1005.15,"dni":0,"dewpt":0.7,"snow":0,"uv":0,"wind_dir":149,"clouds_hi":29,"precip":0.00390625,"vis":24.135,"dhi":0,"app_temp":-3.5,"datetime":"2019-11-29:16","temp":1.1,"ghi":0,"clouds_mid":87,"clouds_low":93}],"city_name":"Moscow","lon":"37.61556","timezone":"Europe/Moscow","lat":"55.75222","country_code":"RU","state_code":"48"}

  ask by Pranav translate from so

Answer 1

等待大神答复