Show Div based on Value from Json response

[ajdauda]

I want to show a specific color based on the value i get from the Json response.

i.e.

if the temp = any number between 1 and 15 it will show a blue box below and...

if the temp = any number between 16 and 25 it will show a green box below

Jsfiddle:

http://jsfiddle.net/23HQC/396/

-------------------------

$.ajax

url: 'http://api.wunderground.com/api/36b799dc821d5836/conditions/q/UK/London.json'

dataType: 'jsonp'

data: 'url'

success: (data) ->

for index, result of data

 temp = result.temp_c

 icon = result.icon_url

 weather = result.weather

        $('p.currenttemp').html "#{temp}"
        $('p.currentcondition').html "#{weather}"
        $('div.currentIcon').html "<img src='#{icon}' >"

$('.box').hide();
if ($('p.currenttemp').is('1 - 15')) $('.blue.box').show();
if ($('p.currenttemp').is('16 - 25')) $('.green.box').show();
if ($('p.currenttemp').is('25 - 35')) $('.red.box').show();

[LesF]

Possibly remove the 'display:none' from your box class. You don't need those 3 boxes, you can just use one div and use jquery methods addClass and removeClass to change it's color.
You have a class named currentConditions, but your code uses currentcondition.
Sorry, apart from that I can't get much further, have you tried getting it to work in JavaScript instead of coffeescript?

[LesF]

I changed the language from coffeescript to JavaScript and this works, tho I left out the image retrieval part. Maybe this will help you work out the coffescript version anyway:

$.ajax({
    url: 'http://api.wunderground.com/api/36b799dc821d5836/conditions/q/UK/London.json',
    dataType: 'jsonp',
    data: '?',
    success: function(weatherData){
        if (weatherData["current_observation"] != null
           && typeof weatherData["current_observation"] === 'object')
           DisplayWeather(weatherData["current_observation"]);
    }
});
function DisplayWeather(obsData)
{
    // alert("Observation country: " + obsData.observation_location.country);
    var tmpC = parseInt(obsData.temp_c);
    $(".currenttemp").html(obsData.temp_c);
    $(".currentcondition").html(obsData.weather);

    if (tmpC < 16)
        $(".weatherModule").css('background','#0000ff');
    else if (tmpC < 26)
        $(".weatherModule").css('background','#00ff00');
    else
        $(".weatherModule").css('background','#ff0000');
}