天気アプリのAPIが動作しなくなった

Question

私は無料コードキャンプのために作っているシンプルなウェブアプリケーションで動作するようにforecast.ioのAPIを取得しようとしています。

私はこの機能を持ついくつかの問題を抱えている：

function getWeather() { 
    $.ajax({ 
     url: baseURL + key + lat + "," + lon, 
     success: function() { 
     console.log("the api responded with the weather :)"); 
     $(".desc").text("If it worked this will appear"); 
     } 
    }); 

}

あなたがここに完全なコードを表示することができます：私は2つのチェック、にconsole.logを設定しているhttp://codepen.io/Mortiferr/pen/mPXKzZ

をある時点で動作してからランダムに動作を停止しましたが、jQuery .textは決して動作しませんでした。

なぜこれが機能しないのですか？

Answer 1

コードを詳しく見てみると、スコープに問題があるようですが、最初に変数latとlonをグローバルに宣言しています。ユーザーの現在の位置を取得してからAPIリクエストをnavigatorの内部にすることをお勧めします。

navigator.geolocation.getCurrentPosition(function(pos){ 
    var lat = pos.coords.latitude; 
    var lon = pos.coords.longitude; 
    $.ajax({ 
     url: baseURL + baseURL + key + lat + "," + lon, 
     method: "GET", 
     dataType: "jsonp", 
     success: function(x){ 
      console.log("the api responded with the weather :)"); 
      $(".desc").text("If it worked this will appear"); 
     } 
    }); 
}); 

願っています！

Answer 2

私はあなたの例を修正し、そのエンドポイントで試しました。それがあるとして、彼らは、データ化けが含まれているJSONを返すようだ "Unexpected end of data at line 1"エラー

ここで変形例です：。http://codepen.io/anon/pen/KzxOGqおよび以下に概説：あなたは完全に別のエンドポイントとしようとした場合

function fahrenheitToCelsius() { 
    var celsiusTemp = Math.round((temperature - 32)/1.8); 
} 

function init() { 
    var key = "d7294f4361b9b4f604fc3bb61e7ae763"; // please no looky 
    var baseURL = "https://api.forecast.io/forecast/" // bass drop 
    var lat; 
    var lon; 
    var url; 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(location) { 
     lat = location.coords.latitude; 
     lon = location.coords.longitude; 

     url = baseURL + key + '/' + lat + "," + lon; 

     $.ajax({ 
      url: url, 
      cors: true, 
      success: function(d) { 
       console.log("the api responded with the weather :)"); 
       $(".desc").text("Here is the weather"); 
      } 
     }) 
     }); 
    } else { 
     alert("Sorry, geolocation is not supported by this browser.") 
    } 
} 

init(); // batter up 

、それは動作しますが、http://date.jsontest.com/言う。

彼らのAPIが変更されたことをノートもあります。あなたはそれらのDOCSを見れば、あなたはこのURLをSCHEが必要になりますことを確認私はそれが機能するために：私が最初に言ったように、forecast.ioを送るように見える、

https://api.forecast.io/forecast/d7294f4361b9b4f604fc3bb61e7ae763/63.559508,10.209261

しかし：

https://api.forecast.io/forecast/APIKEY/LATITUDE,LONGITUDE 

ので、例えばこの1つは、あなたのブラウザーで開く場合は動作しますxhr-requestsが終了したデータで終わるので、いくつかの問題があります。

また、元のコード例では、GEOはインスタンス化されないため、コンソールでエラーが発生します。私はlooking at the modified oneを提案します。