Mit Schalter auf Wettersymbole zugreifen

Ich versuche, eine Switch-Anweisung zu verwenden, um auf die Symbole von https://erikflowers.github.io/weather-icons/ mit der http://simpleweatherjs.com/ API zuzugreifen.Mit Schalter auf Wettersymbole zugreifen

Ich denke, ich habe alles richtig eingerichtet - ich habe die Wetter-icons.css-Datei in meinem CSS-Ordner und ich kopierte die Schriftart-Ordner auch über.

Wenn ich den folgenden Code console.log, gibt es nur den Standard-Fall "Thermometer-Exterior" zurück.

function getTemp(currentLat,currentLong) { 
    var getURL = 'https://simple-weather.p.mashape.com/weatherdata?lat=' + currentLat +'&lng=' + currentLong + '&deg=F'; 

$.ajax({ 
headers: { 
    "X-Mashape-Key": "2lp07ix0Wbmshx4DT1QG8ZuPr3Ynp15ZORmjsnRTWmCuVL8gO1" 
}, 
url: getURL, 
success: function(response) { 
    var json_obj = JSON.parse(response); 
    var current = json_obj.query.results.channel.item; 
    var temp = current.condition.temp; 
    var condIcon = current.condition.code; 
    var description = current.condition.text; 
    var units = json_obj.query.results.channel.units; 
    console.log(current); 

    $(".temp").html(temp + ' ' + units.temperature); 
    $(".description").html(description); 

    switch (condIcon) { 
    case 0: 
     condIcon = 'tornado'; 
     break; 

    case 1: 
    case 2: 
     condIcon = 'hurricane'; 
     break; 

    case 3: 
    case 4: 
     condIcon = 'day-thunderstorm'; 
     break; 

    case 5: 
    case 6: 
    case 7: 
     condIcon = 'rain-mix'; 
     break; 

    case 8: 
    case 9: 
     condIcon = 'showers'; 
     break; 

    case 10: 
    case 11: 
    case 12: 
     condIcon = 'rain'; 
     break; 

    case 13: 
    case 14: 
    case 15: 
    case 16: 
     condIcon = 'snow'; 
     break; 

    case 17: 
    case 18: 
     condIcon = 'hail'; 
     break; 

    case 19: 
     condIcon = 'dust'; 
     break; 

    case 20: 
    case 21: 
     condIcon = 'fog'; 
     break; 

    case 22: 
     condIcon = 'smoke'; 
     break; 

    case 23: 
    case 24: 
     condIcon = 'windy'; 
     break; 

    case 25: 
     condIcon = 'snowflake-cold'; 
     break; 

    case 26: 
     condIcon = 'cloudy'; 
     break; 

    case 27: 
    case 29: 
     condIcon = 'night-cloudy'; 
     break; 

    case 28: 
    case 30: 
     condIcon = 'day-cloudy'; 
     break; 

    case 31: 
     condIcon = 'night-clear'; 
     break; 

    case 32: 
     condIcon = 'day-sunny'; 
     break; 

    case 33: 
     condIcon = 'stars'; 
     break; 

    case 34: 
     condIcon = 'sunny'; 
     break; 

    case 35: 
     condIcon = 'rain-mix'; 
     break; 

    case 36: 
     condIcon = 'hot'; 
     break; 

    case 37: 
    case 38: 
    case 39: 
     condIcon = 'thunderstorm'; 
     break; 

    case 40: 
     condIcon = 'sprinkles'; 
     break; 

    case 41: 
    case 42: 
     condIcon = 'snow'; 
     break; 

    case 44: 
     condIcon = 'day-cloudy'; 
     break; 

    case 45: 
     condIcon = 'thundershower'; 
     break; 

    case 46: 
     condIcon = 'snow'; 
     break; 

    case 47: 
     condIcon = 'storm-showers'; 
     break; 

    case 3200: 
     condIcon = 'thermometer-exterior'; 
     break; 

    default: 
     condIcon = 'thermometer-exterior'; 
} 

// add the css prefix 
condIcon = 'wi-' + condIcon; 

// set the image 
console.log(condIcon); 
$('.icon i').addClass('wi').addClass(condIcon); 
} 
    }); 
}

Was ist hier los? Die API gibt den richtigen Wettercode zurück - ist das meine Switch-Anweisung? Ich sehe das Symbol auch nicht, wenn meine Seite geladen wird. Hier ist die html -

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/weather.css"> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="js/weather.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
</head> 
<body> 

<div class="container"> 
    <div class="row">  
    <div class="col-md-12"><p>Local Weather</p></div> 
    </div> 
     <div class="row"> 
     <div class="col-md-12"><p class="location"></p></div> 
    <div class="row"> 
    <div class="col-md-4"><p class="description"></p></div> 
    <div class="col-md-4"> <p class="temp"></p></div> 
    <div class="col-md-4"> <p class="icon"></p></div> 
    <div class="row"> 

    </div> 
    </div> 
    </div> 
</div> 

</body> 
</html>

Vielen Dank!

Quelle

2016-11-01 aww

console.log condIcon direkt vor Ihrer Switch-Anweisung, um zu sehen, welche Werte Sie bekommen –

Es gibt den richtigen Wettercode. Zum Beispiel bekomme ich jetzt 33 für "Nacht-teilweise-bewölkt" – aww

Sicherstellen, dass der condIcon Wert kein String ist, versucht

condIcon = parseInt(current.condition.code);

Quelle

2016-11-01 04:25:26

Ich testete das aus und kann bestätigen, dass dies das Problem ist. –

Auch ich wollte deine Antwort bearbeiten, aber ich kann nicht, weil die Bearbeitung zu klein ist, aber ich denke, es wäre auch besser, das Radix mit einzubeziehen, also 'condIcon = parseInt (current.condition.code, 10)' .. Obwohl es normalerweise sowieso in base10 sein wird, um sicher zu sein, dass es gut ist, es als Best Practice einzubeziehen. –

Mit Schalter auf Wettersymbole zugreifen

Antwort

Verwandte Themen