代码之家  ›  专栏  ›  技术社区  ›  Ylama

雅虎天气api JSON图标

  •  1
  • Ylama  · 技术社区  · 6 年前

    所以我只想知道是否可以使用当前的Yahoo天气API来显示比JSON响应在CDATA中返回的图像更好的图像?

    JSON格式:

    以api为例,我得到了JSON响应 HERE .

    当前图像:

    目前它的风很大,我从API Json格式CDATA得到的图像如下: IMAGE

    我想展示的图片:

    我想要的是您在右侧导航中看到的漂亮图像: Yahoo

    这是可能的,还是json CDATA中的图像是我唯一可以使用的选项?

    当前代码(工程):

    var queryURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22anglesey%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
    
    $.getJSON(queryURL, function (data) {
      
      var results = data.query.results
      var firstResult = results.channel.item.condition
      var link = results.channel.image.link
      var img_link_url = results.channel.image.url
      
      var name = results.channel.location.city
      console.log(firstResult);console.log(link);console.log(img_link_url);
        
      var description = results.channel.item.description
      console.log(description);
        
    
    
    var regex = /img.*?src=("|')(.*?)\1/i;
    var match = description.match(regex)[2];
    console.log(match);
        
      var location = firstResult.location // not returned in response
      var temp = firstResult.temp
      var text = firstResult.text
      
     var cels =  (temp - 32) * (5 / 9);
    // if  text = "party cloudy -> class = pcloudy || if  text = "cloudy -> class = cloudy || sunny, rainy"
    // or use code https://stackoverflow.com/questions/30216140/how-can-i-get-yahoo-weather-backgrounds-from-api
    //https://developer.yahoo.com/weather/    
      $('#output').append('<p><span>Weather in </span> ' + name + ' <img  src=' + match + '>  ' + temp + 'F° / ' + Math.floor(cels) + ' C°</p>');
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="output"></div>
    1 回复  |  直到 6 年前
        1
  •  1
  •   Ylama    6 年前

    我有 断然的 通过使用 代码 从Yahoo API返回并将图像分配给特定代码:

    你可以从这里下载图片,分配选项供选择,在我的例子中,我选择了“mono flat”: LINK

    雅虎代码和描述也可以在这里找到: LINK

    则代码:

    注意,你不会看到图像,但它在我这边工作。

    var queryURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22anglesey%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
    
    $.getJSON(queryURL, function (data) {
      
      var results = data.query.results
      var firstResult = results.channel.item.condition
      var link = results.channel.image.link
      var img_link_url = results.channel.image.url
      
      var name = results.channel.location.city
      console.log(firstResult);
        console.log(link);
        console.log(img_link_url);
        
      var description = results.channel.item.description
      console.log(description);
        
    
    
        var regex = /img.*?src=("|')(.*?)\1/i;
        var match = description.match(regex)[2];
        console.log(match);
        
      var location = firstResult.location // not returned in response
      var temp = firstResult.temp
      var text = firstResult.text
      var code = firstResult.code
      var img
      
      
      
        switch(code) {
        case "0":
            img = "/images/mono-flat/0.png";
            break;            
        case "1":
            img = "/images/mono-flat/1.png";
            break;
        case "2":
            img = "/images/mono-flat/2.png";
            break;
        case "3":
            img = "/images/mono-flat/3.png";
            break;
        case "4":
            img = "/images/mono-flat/4.png";
            break;
        case "5":
            img = "/images/mono-flat/5.png";
            break;
        case "6":
            img = "/images/mono-flat/6.png";
            break;
        case "7":
            img = "/images/mono-flat/7.png";
            break;
        case "8":
            img = "/images/mono-flat/8.png";
            break;
        case "9":
            img = "/images/mono-flat/9.png";
            break;
        case "10":
            img = "/images/mono-flat/10.png";
            break;
        case "11":
            img = "/images/mono-flat/11.png";
            break;
        case "12":
            img = "/images/mono-flat/12.png";
            break;
        case "13":
            img = "/images/mono-flat/13.png";
            break;
        case "14":
            img = "/images/mono-flat/14.png";
            break;
        case "15":
            img = "/images/mono-flat/15.png";
            break;
        case "16":
            img = "/images/mono-flat/16.png";
            break;
        case "17":
            img = "/images/mono-flat/17.png";
            break;
        case "18":
            img = "/images/mono-flat/18.png";
            break;
        case "19":
            img = "/images/mono-flat/19.png";
            break;
        case "20":
            img = "/images/mono-flat/20.png";
            break;
        case "21":
            img = "/images/mono-flat/21.png";
            break;
        case "22":
            img = "/images/mono-flat/22.png";
            break;  
        case "23":
            img = "/images/mono-flat/23.png";
            break;
        case "24":
            img = "/images/mono-flat/24.png";
            break;
        case "25":
            img = "/images/mono-flat/25.png";
            break;
        case "26":
            img = "/images/mono-flat/26.png";
            break;
        case "27":
            img = "/images/mono-flat/27.png";
            break;
        case "28":
            img = "/images/mono-flat/28.png";
            break;
        case "29":
            img = "/images/mono-flat/29.png";
            break;
        case "30":
            img = "/images/mono-flat/30.png";
            break;
        case "31":
            img = "/images/mono-flat/31.png";
            break;
        case "32":
            img = "/images/mono-flat/32.png";
            break; 
        case "33":
            img = "/images/mono-flat/33.png";
            break;
        case "34":
            img = "/images/mono-flat/34.png";
            break;
        case "35":
            img = "/images/mono-flat/35.png";
            break;
        case "36":
            img = "/images/mono-flat/36.png";
            break;  
        case "37":
            img = "/images/mono-flat/37.png";
            break;
        case "38":
            img = "/images/mono-flat/38.png";
            break;
        case "39":
            img = "/images/mono-flat/39.png";
            break;
        case "40":
            img = "/images/mono-flat/40.png";
            break;
        case "41":
            img = "/images/mono-flat/41.png";
            break;
        case "42":
            img = "/images/mono-flat/42.png";
            break;
        case "43":
            img = "/images/mono-flat/43.png";
            break;
        case "44":
            img = "/images/mono-flat/44.png";
            break;
        case "45":
            img = "/images/mono-flat/45.png";
            break;
        case "46":
            img = "/images/mono-flat/46.png";
            break; 
        case "47":
            img = "/images/mono-flat/47.png";
            break;              
        default:
            img = "/images/mono-flat/na.png";
        }
      
    
      
     var cels =  (temp - 32) * (5 / 9);
    
        $(document).ready(function() {
        $('#output').append('<p><span>Weather in </span> ' + name + ' <img width="32px"  src=' + img + '>  ' + temp + 'F° / ' + Math.floor(cels) + ' C°</p>');
        });
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="output"></div>