Get value from API and show image depending on value

JavaScript
1

Hi!

I try to code in javascript, but I dont get the code work. I try to learn javascript.
I get a value from an API, and depending on the value different images should show.

html:

<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:

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 && value <= 20){
    document.getElementById('output25Bild').src = yellow-flag.gif;
} else if (value > 20 && value <= 25){
    document.getElementById('output25Bild').src = orange-flag.gif;
} else if (value > 25 && value <= 50){
    document.getElementById('output25Bild').src = red-flag.gif;
} else (value > 50){
    document.getElementById('output25Bild').src = purple-flag.gif;
}


})
2

@Nisse,
have you tried console logging the data object and seeing what it contains?
What is the format of the response you are getting from the API?

3

you need to pick which value to use?
( here I used 1 for the second bracket, you could also use 0?)

var result = data[1].sensordatavalues[1].value;

and also at the end, you can do…
else if (value > 50)
or just
else … and then the purple flag code?

4

It is a integer after the code var value = Math.round(value).

5

  1. You are setting the src on a div, you want an img.

  2. The else statement does not take a condition. It is just if everything else didn’t get evaluated to true.

else (value > 50){
    document.getElementById('output25Bild').src = purple-flag.gif;
}

Should be:

else {
    document.getElementById('output25Bild').src = purple-flag.gif;
}
6

I have now the code after some adjustments:

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="output25Bild" src="green-flag.gif" />
<script type="text/javascript" src="output25Bild.js"></script>

output25Bild.js:

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 && value <= 20){
    document.getElementById('output25Bild').src = yellow-flag.gif;
} else if (value > 20 && value <= 25){
    document.getElementById('output25Bild').src = orange-flag.gif;
} else if (value > 25 && value <= 50){
    document.getElementById('output25Bild').src = red-flag.gif;
} else {
    document.getElementById('output25Bild').src = purple-flag.gif;
}


})

I hope the if the value for example is 30 it will change to document.getElementById(‘output25Bild’).src = red-flag.gif;

7

The logic should work, but you need to link to the path of the images as a string.

If the images are in the same folder as the other source files:

document.getElementById('output25Bild').src = './green-flag.gif'

And so on.

8

It doesn’t matter which value it is, it always shows green flag.
I don’t know whats wrong.

9

Then you’re not pointing to the images correctly. You can’t just use the name of the file, they have to be strings.

'./green-flag.gif' or just 'green-flag.gif' (notice the quotation marks)

10

I have the complete code

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="output25Bild" src="green-flag.gif" />
<script type="text/javascript" src="output25Bild.js"></script>

output25Bild.js:

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 && value <= 20){
    document.getElementById('output25Bild').src = './yellow-flag.gif';
} else if (value > 20 && value <= 25){
    document.getElementById('output25Bild').src = './orange-flag.gif';
} else if (value > 25 && value <= 50){
    document.getElementById('output25Bild').src = './red-flag.gif';
} else {
    document.getElementById('output25Bild').src = './purple-flag.gif';
}  
  


})

Is it some wrong in the code?

11

I don’t why your back to using a div again, but you can’t use a div, it has to be an img element.

12

Sorry, I have img. I copied the wrong html-code in the reply. I don’t have div.

16

Ok, now I want some text depending on which value it is.

html:

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

output25Text.js:

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.write("Very good air quality");
} else if (value > 10 && value <= 20){
    document.write("Good air quality");
} else if (value > 20 && value <= 25){
    document.write("Medium air quality");
} else if (value > 25 && value <= 50){
    document.write("Bad air quality");
} else {
    document.write("Very bad air quality");
}   
    
})

It works, I want it in a tabe on my homepage.
But the problem is that it opens a new page with just the text depening on which value it is.
Why is it so?