meteo

json parsing with jquery

by toubia95

HTML

<div class="meteo">
  <h1>Météo à <span class="ville-pays"></span></h1>
  <div id="j0">
    <div class="picto"></div>
    <p class="txt">
      Actuellement : <span class="tmp"></span>
      <br><span class="jour"></span>
      <br> Soleil : <span class="soleil"></span>
      <br> Vent : <span class="vent"></span>
      <br><span class="temp"></span>
    </p>
  </div>
  <div id="j1">
    <div class="picto"></div>
    <p class="txt">
      <span class="jour"></span>
      <br> Vent : <span class="vent"></span>
      <br><span class="temp"></span>
    </p>
  </div>
  <div id="j2">
    <div class="picto"></div>
    <p class="txt">
      <span class="jour"></span>
      <br> Vent : <span class="vent"></span>
      <br><span class="temp"></span>
    </p>
  </div>
  <div id="j3">
    <div class="picto"></div>
    <p class="txt">
      <span class="jour"></span>
      <br> Vent : <span class="vent"></span>
      <br><span class="temp"></span>
    </p>
  </div>
  <div id="j4">
    <div class="picto"></div>
    <p class="txt">
      <span class="jour"></span>
      <br> Vent : <span class="vent"></span>
      <br><span class="temp"></span>
    </p>
  </div>
</div>

CSS

/* http://www.prevision-meteo.ch/services
http://www.prevision-meteo.ch/uploads/pdf/recuperation-donnees-meteo.pdf */

.condition {
  background:...

JavaScript

var ville = "vandoeuvre les nancy"; //Crévic
ville = ville.replace(/ /g, "-").replace(/[éèê]/g, "e").toLowerCase();
//var lat = "48.6389273";
//var lng = "6.4045805";
//ville = "lat="+lat+"lng="+lng;
//localStorage.setItem('meteoVille', ville);
//ville = localStorage.getItem('meteoVille');
$.getJSON("http://www.prevision-meteo.ch/services/json/" + ville, function(json) {})
    .done(function(json) {
      valeursMeteo(json);
      localStorage.setItem('meteoJson', JSON.stringify(json));
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      if (localStorage.getItem('meteoJson') !== null) {
        valeursMeteo(JSON.parse(localStorage.getItem('meteoJson')));
      } else {
        alert('Données indisponibles (' + textStatus +')');
      }
    });

var directionDuVEnt = function (degres) {
  var d = ["Nord", "Nord-Nord-Est", "Nord-Est", "Est-Nord-Est", "Est", "Est-Sud-Est", "Sud-Est", "Sud-Sud-Est", "Sud", "Sud-Sud-Ouest", "Sud-Ouest", "Ouest-Sud-Ouest", "Ouest", "Ouest-Nord-Ouest", "Nord-Ouest", "Nord-Nord-Ouest"];
  return d[parseInt(degres/22.5)];
}

var valeursMeteo = function (json) {
   var c = json.city_info;
   $('.ville-pays').text(c.name + " - " + c.country);
   $('#j0 .soleil').text(c.sunrise + " - " + c.sunset);
   $('#j0 .tmp').text(json.current_condition.tmp+"°");
   for (i = 0; i < 5; i++) {
     var j = json['fcst_day_' + i];
     var mydate = j.date.split(".");
     var month = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"]
     $('#j' + i + ' .jour').text(j.day_long + " " + mydate[0] + " " + month[mydate[1]-1] + " " + mydate[2]);
     $('#j' + i + ' .temp').text("" + j.tmin + "° / " + j.tmax + "° // " + j.condition);
     var big = i == 0 ? '-big' : '';
     $('#j' + i + ' .picto').addClass("condition condition-" + j.condition.replace(/ /g, "-").replace(/[éèê]/g, "e").toLowerCase() + big + "-png cond"+big);
     var hour = "12H00";
     var k =...