meteo.toimii.fi json data

meteo.toimii.fi sääaseman data päivittyy minuutin välein. Tuoreimman mittauksen json data on urlissa https://meteo.toimii.fi/json/latest.php.

Upotus webbisivuun

Ensin html koodiin lisätään tagit sinne missä dataa halutaan käyttää

Mittausaika: <span id="meteoTime">-</span>
Ilman lämpötila: <span id="meteoTemperature">-</span>°C
Ilman suhteellinen kosteus: <span id="meteoHumidity">-</span>%
Tuulen nopeus: <span id="meteoWindSpeed">-</span>°
Tuulen suunta: <span id="meteoWindDirection">-</span>m/s
1h sademäärä: <span id="meteoRainfall1h">-</span>mm
24h sademäärä: <span id="meteoRainfall24h">-</span>mm
Imanpaine: <span id="meteoPressure">-</span>hPa
Valoisuus: <span id="meteoSolarRadiation">-</span>kLux
UV-indeksi: <span id="meteoUV">-</span>

Seuraavaksi webbisivun html:n loppuun lisätään javascript pätkä joka noutaa datat ja lisää ne span tageihin. Scripti hakee datat heti sivun latauksen jälkeen ja päivittää dataa 30 sek välein.
<script>
function getMeteo() {
    fetch('//meteo.toimii.fi/json/latest.php')
        .then((response) => {
            return response.json()
        })
        .then((data) => {
            document.getElementById("meteoTime").innerHTML = data.time
            document.getElementById("meteoTemperature").innerHTML = data.temp
            document.getElementById("meteoHumidity").innerHTML = data.humidity
            document.getElementById("meteoWindSpeed").innerHTML = data.windspeed
            document.getElementById("meteoWindDirection").innerHTML = data.winddirection
            document.getElementById("meteoRainfall1h").innerHTML = data.rainfall1h
            document.getElementById("meteoRainfall24h").innerHTML = data.rainfall24h
            document.getElementById("meteoPressure").innerHTML = data.pressure
            document.getElementById("meteoSolarRadiation").innerHTML = data.solarradiation
            document.getElementById("meteoUV").innerHTML = data.uv
        })
        .catch((err) => {
            console.log(err)
        }) 
}
getMeteo(); // haetaan tulokset heti
setInterval(getMeteo, 30000); // ja päivitetään 30sek välein
</script>

Toiminnan testaus

Tässä pitäisi näky live data.

Mittausaika: -
Ilman lämpötila: -°C
Ilman suhteellinen kosteus: -%
Tuulen nopeus: -m/s
Tuulen suunta: -°
1h sademäärä: -mm
24h sademäärä: -mm
Imanpaine: -hPa
Valoisuus: -kLux
UV-indeksi: -

Lisenssi

Creative Commons -lisenssi
Tämä teos on lisensoitu Creative Commons Nimeä 4.0 Kansainvälinen -lisenssillä
Säädatoja käytettäessä on mainittava lähde meteo.toimii.fi.