显示每天的天气与黑暗的天空API

问题描述 投票:0回答:1

我无法让我的天气应用程序使用黑暗的天空API 5天的天气预报工作。我能拿到的天气中使用“目前”在我的网址的关键词,显示的,但我不能有使用“日报”为关键字的任何信息显示。我知道这是标记为重复,但它正在寻找如何使用黑暗的天空API,因此预报显示本周的信息,而不是仅仅为1天到显示使用JSON(不JSONP)数据。

关于如何得到这个任何想法来工作?

这里是我到目前为止的代码:

HTML

 <div class="container">
  <!-- Month and Year -->
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6">
      <p id="monthNum"></p>
      <p id="year"></p>
    </div>
  </div>
  <!-- END Month and Year -->

  <!-- Weather Forecast -->
  <div id="weather">
    <div class="row">
      <div id="currentDay" class="col-md-2">
        <div class="thumbnail current-thumbnail">
          <div class="row">
            <div class="col-sm-12">
              <p class="time text-center"></p>
              <p class="location text-center"></p>
              <p class="tempFeel text-center"></p>
              <p class="humidity text-center"></p>
            </div>
          </div>
          <p class="text-uppercase text-center"><span class="forecastToday">Thu</span> <br /> <span class="forecastNumToday">14</span></p>
           <p class="icon text-center"></p>
           <p class="temp text-center"></p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="thumbnail">
          <p class="text-uppercase text-center"><span class="forecastDay">Fri</span> <br /> <span class="forecastNum">15</span></p>
          <p class="icon-upcoming text-center"></p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="thumbnail">
          <p class="text-uppercase text-center"><span class="forecastDay">Sat</span> <br /> <span class="forecastNum">16</span></p>
          <p class="icon-upcoming text-center"></p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="thumbnail">
          <p class="text-uppercase text-center"><span class="forecastDay">Sun</span> <br /> <span class="forecastNum">17</span></p>
          <p class="icon-upcoming text-center"></p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="thumbnail">
          <p class="text-uppercase text-center"><span class="forecastDay">Mon</span> <br /> <span class="forecastNum">18</span></p>
          <p class="icon-upcoming text-center"></p>
        </div>
      </div>
    </div>
  </div>
  <!-- END Weather Forecast -->
</div>

JS

    //Get the user's position
    if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {

    var lat = position.coords.latitude;
    var long = position.coords.longitude;

    //Dark Sky API key 
    var apiKey = "API-KEY";

    //Dark Sky URL 
    var weatherURL = "https://api.darksky.net/forecast/";

    //Cross-Origin URL to allow use on Chrome
    var corsURL = "https://cors-anywhere.herokuapp.com/";

    //Full Weather Forecast URL
    var fullURL = corsURL + weatherURL + apiKey + "/" + lat + "," + long + "?exclude=currently,hourly,flags";

    //jQuery JSON call to pull in temperature and icon information
    $.getJSON(fullURL, function(json) {

      for (i = 0; i < json.data.length; i++) {
        var temp = json.data.temperatureMax;
        //console.log(temp);
      }
      //Display the Current temp in Farenheit

      //$('.temp').html(temp + "&deg;F");

      var icon = json.daily.icon;
      //console.log(icon);
      $(".icon").html("<i class='wi wi-forecast-io-" + icon +"'></i>");
    });
jquery weather-api
1个回答
0
投票

快速回答:

为了访问不是从黑暗的天空API使用当前的天气更多:

today = json['daily']['data'][0]['temperatureHigh']
tomorrow = json['daily']['data'][1]['temperatureHigh']
. . .

更改第三[]得到你想要的每一天(如[4]),它从0到7。在过去的[],您可以使用关键字来从JSON访问不同的变量(例如数“temperatureLow”,“湿度”等)

一点点额外的:

基本上,这个问题应该是如何访问一个JSON文件。如果您在浏览器中键入URL请求(https://api.darksky.net/forecast/api_key/lat,lon?units=auto)。你会得到一个巨大的JSON字符串。如果您解析它,它应该清楚哪些元素是什么。

© www.soinside.com 2019 - 2024. All rights reserved.