Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

smhi api få ut värden javascript

1
Skriv svar
Permalänk
Medlem
●

smhi api få ut värden javascript

Hej!

Jag vill få ut värden fråm smhi,
https://opendata-download-metfcst.smhi.se/api/category/fwif1g...,
exempelvis fwiindex.
Dock så är jag nybörjare, fick ett annat script att fungera:

var queryURL = "//api.luftdaten.info/v1/sensor/42440/";
$.getJSON(queryURL, function(data) {
var result = data[0].sensordatavalues
console.log(result);
var value = result[0].value
$('#output').append('The value is ' + value);
})

Blir det liknande kod för smhi?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Testa att köra detta och se vad du får:

var queryURL = "https://opendata-download-metfcst.smhi.se/api/category/fwif1g...";
$.getJSON(queryURL, function(data) {
    console.log(data);
})

Det är alltså bara ett getJSON till smhi apit och sedan loggar vi ut svaret.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Njä, jag får det inte att fungera.

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●
Skrivet av Hottetotte:

Njä, jag får det inte att fungera.

Gå till inlägget

Får du något felmeddelande då?

Visa signatur

Akta dig för XY-Problemet, sätt alltid dina frågor i ett sammanhang!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Hottetotte:

Njä, jag får det inte att fungera.

Gå till inlägget

Jag testade koden jag skrev och det fungerar bra, men du måste ange hela adressen till apit och inte med "..." på slutet. Det är bara swec forumet som klipper av en lång url.

Om du trycker på citera knappen så ser du hela koden utan modifiering av forumet.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag använder jsbin.com och provar.
Jag får ut på console.
Men hur får jag ut det specifika värdet fwiindex?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Hottetotte:

Jag använder jsbin.com och provar.
Jag får ut på console.
Men hur får jag ut det specifika värdet fwiindex?

Gå till inlägget

För det första tycker jag inte du ska använda ett föråldrat bibliotek som jQuery om du är nybörjare och ska lära dig nu. Datan kan du hämta via fetch api och vanilla JavaScript.

(const fetchApi = async () => {
    const res = await fetch('https://opendata-download-metfcst.smhi.se/api/category/fwif1g...');
    const json = await res.json();
    console.log(json);
})();

När du har datan så kan du använda destructuring för att plocka ut de värdena du vill komma åt. För att se hur djupt du behöver gå så får du utgå från hur din JSON ser ut.

I det här fallet så är det en egenskap på roten som heter timeSeries som är en array av objekt. Dessa objekt innehåller i sin tur egenskaper för validTime och parameters.

// Plocka ut timeSeries arrayen i en konstant som heter timeSeries.
const { timeSeries } = json;

Nu har vi fått ut en array av objekten som finns i timeSeries.
Därefter kan vi göra en ny destructuring för att få ut arrayen från parameters.

// Plocka ut parameters från timeSeries.
const { parameters } = timeSeries;

Där slutligen name (fwiindex) finns på första index i parameters arrayen.

// Plocka ut egenskapen name från objektet i första index av parameters.
const { name } = parameters[0];

Detta kan vi givetvis förenkla med nästad destructoring, där vi direkt kan plocka ut det vi är intresserad av, dvs. arrayen av objekt som finns i parameters.

const { timeSeries : [ {parameters} ] } = json;

Från vår json, plocka ut timeSeries och i timeSeries arrayen, plocka ut parameters. Vilket då ger dig en array av objekten som finns i parameters. Slutligen kan du använda map för att t.ex. loopa ut alla namn i en lista.

<ul id="name">

</ul>

d.querySelector('#name').innerHTML = parameters.map(p => `<li>${p.name}</li>`).join('');

Fiddle med exempel https://jsfiddle.net/waLqsdne/

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack så mycket, ser att det är mycket att lära.
Synd att man inte är haj på det här.

Såg att man fick ut en lista.
Det jag egentligen tänkte mig var att få värdet på fwiindex som jag kan presentera på min hemsida.
Och för att ytterligare krångla till det så beroende på vilket värde fwiindex har, så ska det visas en bild.

fwiindex = 1, visa bild 1
fwiindex = 2, visa bild 2
osv.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Om du vill ha ut alla fwiindes värden så kan man göra enligt följande:

//Hämta datan. Här kan du använda jquery om du så vill. 
fetch('https://opendata-download-metfcst.smhi.se/api/category/fwif1g...')
    .then(res => res.json())
    .then(data => {
      //Loopa över alla tidsserier
      data.timeSeries.forEach(ts => {
         //För varje tidsserie hämta den parameter som har har namnet twiindex.
      	 const param = ts.parameters.find(p => p.name === "fwiindex");
         //Skriver ut hela parametern
         //console.log(param)
         //Skriver ut parameterns värden
         //console.log(param.values)
         //Skriver ut parameterns första värde
         console.log(param.values[0])
    	});
    });

Var det något åt det hållet du var ute efter?

Här har du ett exempel som visar olika bilder beroende på värde.
https://jsfiddle.net/ghbf2m3L/

Senast redigerat Lade till fiddle
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Hottetotte:

Tack så mycket, ser att det är mycket att lära.
Synd att man inte är haj på det här.

Såg att man fick ut en lista.
Det jag egentligen tänkte mig var att få värdet på fwiindex som jag kan presentera på min hemsida.
Och för att ytterligare krångla till det så beroende på vilket värde fwiindex har, så ska det visas en bild.

fwiindex = 1, visa bild 1
fwiindex = 2, visa bild 2
osv.

Gå till inlägget

En lista var bara ett exempel.
Om det är endast fwiindex så är det objektet på första positionen i varje index av parameters.
Du kan få ut detta med en for...in loop och lite destructuring.

Så för varje iteration av timeSeries så plockar vi ut name och value från values.
Detta kommer få ut alla fwiindex och enskilda värdet i values (som också är en array).

for(const timeSerie of json.timeSeries){
    const { parameters : [ { values : [value], name} ] } = timeSerie;
    
    console.log(value, name);
}

Känns dock som det börjar bli rätt mycket logik kring om bilder ska visas och inte att det hade varit enklare att använda ett SPA som React/Vue där du kan kapsla in logiken i en komponent och bara skicka in listan via props.

Men här är ett exempel på hur du kan göra fiddle

Generellt är det rätt jobbigt att behöva jobba med djupt nästad data i frontend, därför är det att föredra att få det så platt som möjligt om man kan styra backend.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack igen.

Tanken är egentligen att jag vill visa det första numreriska värdet på fwiindex på min hemsida.
Och beroende på vilket värde det är (värden mellan 1 till 6), så ska jag visa en bild.
Jag har alltså 6 bilder uppladdade på mitt webhotell.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Hottetotte:

Tack igen.

Tanken är egentligen att jag vill visa det första numreriska värdet på fwiindex på min hemsida.
Och beroende på vilket värde det är (värden mellan 1 till 6), så ska jag visa en bild.
Jag har alltså 6 bilder uppladdade på mitt webhotell.

Gå till inlägget

Fick du till APIn? Hur mycket data kan man extrahera utan att den blockerar dig? Kan du få hem väderleksrapporter på datan/orter?!

Visa signatur

Hey boiy

Redigera
Citera flera Citera
1
Skriv svar