Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Avrunda värde till heltal som man hämtat med hjälp av api

Svara
2019-01-26, 15:25
  #1
Nytte
Medlem
Hej!

Jag hämtar data från http://api.luftdaten.info/v1/sensor/16705/:

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

Jag lägger ut värdet på min hemsida:
Kod: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<script type="text/javascript" src="output10.js"></script>

Värdet är ett positivt tal med två decimaler. Nu vill jag inte ha decimalerna, utan bara ett heltal. Hur gör man då? Går det med hjälp av koden nedan på nåt sätt? 45.87 är tex värdet som finns i outpu10.js.

Kod: 
<p id="demo"></p>
  <script>
document.getElementById("demo").innerHTML = Math.round(45.87);
</script>
Citera
2019-01-26, 15:42
  #2
Sugminstorasalta
Medlem
Citat:
Ursprungligen postat av Nytte
Går det med hjälp av koden nedan på nåt sätt? 45.87 är tex värdet som finns i outpu10.js.

Kod: 
<p id="demo"></p>
  <script>
document.getElementById("demo").innerHTML = Math.round(45.87);
</script>
Vad hände när du testade?
Citera
2019-01-26, 15:54
  #3
Nytte
Medlem
Jag löste det mha:

Kod: 
var queryURL = "//api.luftdaten.info/v1/sensor/16705/";
$.getJSON(queryURL, function(data) {
  var result = data[1].sensordatavalues
  console.log(result);
  var value = result[0].value
  document.getElementById("output").innerHTML = Math.round(value);
})
Citera
2019-01-26, 16:14
  #4
Nytte
Medlem
Sen skulle jag vilja fortsätta och ha om luftkvaliteten är mellan 0-50 så ska jag skriva ut bra, om det är mellan 50-100 så är den dålig. Antar att man gör det med else if satser på nåt sätt.

Kod: 
if (value < 50) {
  kvalitet = "Bra";
} else if (value < 100) {
  kvalitet = "Good day";
} else {
  kvalitet = "Kass";
}

Går det även att få med en bild beroende på vilket värde det är?
Tex 0-50 så vill jag ha en grön bild, mellan 50-100 en gul bild, över 100 en röd bild.
Citera
2019-01-26, 18:23
  #5
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av Nytte
Sen skulle jag vilja fortsätta och ha om luftkvaliteten är mellan 0-50 så ska jag skriva ut bra, om det är mellan 50-100 så är den dålig. Antar att man gör det med else if satser på nåt sätt.

Kod: 
if (value < 50) {
  kvalitet = "Bra";
} else if (value < 100) {
  kvalitet = "Good day";
} else {
  kvalitet = "Kass";
}

Går det även att få med en bild beroende på vilket värde det är?
Tex 0-50 så vill jag ha en grön bild, mellan 50-100 en gul bild, över 100 en röd bild.
Ja.

Du lägger ut en img-tagg på din sida, sen ändrar du dess src-attribut med javascriptet.

Du har redan fått tag på ett element med hjälp av dess id, du gör samma sak med img-taggen.
Citera
2019-01-26, 21:37
  #6
Nytte
Medlem
Nu vet jag inte riktigt hur du menar.
__________________
Senast redigerad av Nytte 2019-01-26 kl. 21:56.
Citera
2019-01-26, 23:37
  #7
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av Nytte
Nu vet jag inte riktigt hur du menar.
Kod:
<script type="text/JavaScript">
function changeSrc(){
document.getElementById("pic").src="img/porrbild.jpg";

}


</script>
<img id="pic" src="img/blomma.jpg" />
<button onClick="changeSrc()">Click me</button> 

Nånting sånt.
Citera
2019-01-27, 00:15
  #8
Nytte
Medlem
Jag hade tänkt mig att beroende på vilket aktuellt värde som plockas hem, så ska det visas aktuell bild för just det värdet, någonting i stil med:

Kod: 
var queryURL = "//api.luftdaten.info/v1/sensor/16705/";
$.getJSON(queryURL, function(data) {
  var result = data[1].sensordatavalues
  console.log(result);
  var value = result[1].value
  
var value = Math.round(value)   //runda av till heltal
  
  
if (value < 10) {
   visa bild 1
} else if (value > 10 AND <20){
    visa bild 2
} else if (value > 20 AND <50){
    visa bild 3
}
else (value > 50){
    visa bild 4
}

document.getElementById('img').src = aktuell bild;

})
Citera
2019-01-27, 09:28
  #9
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av Nytte
Jag hade tänkt mig att beroende på vilket aktuellt värde som plockas hem, så ska det visas aktuell bild för just det värdet, någonting i stil med:

Kod: 
var queryURL = "//api.luftdaten.info/v1/sensor/16705/";
$.getJSON(queryURL, function(data) {
  var result = data[1].sensordatavalues
  console.log(result);
  var value = result[1].value
  
var value = Math.round(value)   //runda av till heltal
  
  
if (value < 10) {
   visa bild 1
} else if (value > 10 AND <20){
    visa bild 2
} else if (value > 20 AND <50){
    visa bild 3
}
else (value > 50){
    visa bild 4
}

document.getElementById('img').src = aktuell bild;

})
Så varför gör du inte det då? Du har ju all kod klar.

Istället för "visa bild 4" ska du ha
Kod:
document.getElementById('img').src = aktuell bild; 
så är du ju hemma sen, alternativt om du lägger bildsökvägen i en variabel i iffen.

Vad är problemet?
Citera
2019-01-27, 17:20
  #10
Nytte
Medlem
Jag får det inte att fungera ändå, vet nog inte vad jag gör .

Kod html:
Kod: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output25Bild"></div>
<script type="text/javascript" src="output25Bild.js">

output25Bild.js:
Kod: 
var queryURL = "//api.luftdaten.info/v1/sensor/16705/";
$.getJSON(queryURL, function(data) {
  var result = data[1].sensordatavalues
  console.log(result);
  var value = result[1].value
  var value = Math.round(value)
  
  
if (value <= 10) {
   document.getElementById('output25Bild').src = green-flag.gif;
} else if (value > 10 AND <= 20){
    document.getElementById('output25Bild').src = yellow-flag.gif;
} else if (value > 20 AND <= 25){
    document.getElementById('output25Bild').src = orange-flag.gif;
} else if (value > 25 AND <= 50){
    document.getElementById('output25Bild').src = red-flag.gif;
} else (value > 50){
    document.getElementById('output25Bild').src = purple-flag.gif;
}


})
Citera
2019-01-27, 19:48
  #11
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av Nytte
Jag får det inte att fungera ändå, vet nog inte vad jag gör .

Kod html:
Kod: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output25Bild"></div>
<script type="text/javascript" src="output25Bild.js">

output25Bild.js:
Kod: 
var queryURL = "//api.luftdaten.info/v1/sensor/16705/";
$.getJSON(queryURL, function(data) {
  var result = data[1].sensordatavalues
  console.log(result);
  var value = result[1].value
  var value = Math.round(value)
  
  
if (value <= 10) {
   document.getElementById('output25Bild').src = green-flag.gif;
} else if (value > 10 AND <= 20){
    document.getElementById('output25Bild').src = yellow-flag.gif;
} else if (value > 20 AND <= 25){
    document.getElementById('output25Bild').src = orange-flag.gif;
} else if (value > 25 AND <= 50){
    document.getElementById('output25Bild').src = red-flag.gif;
} else (value > 50){
    document.getElementById('output25Bild').src = purple-flag.gif;
}


})
Jag sa en img-tagg, inte en divtagg.

Om du istället för
Kod:
<div id="output25Bild"></div> 
byter ut divven mot
Kod:
<img id="output25Bild" src="roccosballe.jpg" /> 
Lär det kunna funka lite bättre.

Src bör du ju givetvis byta ut mot någon lämplig startbild istället för Roccos balle.

AND är för övrigt inte en giltig operator i JavaScript, i JavaScript skrivs logisk AND med && och inte nåt annat.

else kommer köras när alla andra iffar har misslyckats, så varför du har ett ogiltigt villkor på din else är även det ett mysterium.

Du kanske borde ta dig an grunderna i JavaScript lite bättre är mitt förslag för fortsatta experiment.
__________________
Senast redigerad av Proton 2019-01-27 kl. 19:51.
Citera
Svara

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback