Get value from API and show image depending on value

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;
}


})

@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?

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?

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

  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;
}

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;

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.

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

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)

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?

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.

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

Out of curiosity, what value are you getting for result when you console.log it? I get an array which looks something like:

[
  {
    id:5908121664,
    value:"4.62",
    value_type:"P1"
  },
  {
    id:5908121665,
    value:"2.95",
    value_type:"P2"
  }
]

Also, since you assign the property named value of the 2nd element of result and round it off, it would result in the value variable being something like 3, which is why the green-flag.gif would display (3 is less than 10).

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?