metaweather APIからangularjsページへのデータの取得

どの都市の天気予報を取得する簡単な天気アプリを構築しています。このAPIには2つの段階があります： 1）都市の名前を入力し、 "どこに地球上のID"（woeid）を取得します。 2）woeidを使用して天気を検索します。metaweather APIからangularjsページへのデータの取得

これはAPIである：例えばhttps://www.metaweather.com/api/

： [{ "タイトル"： "ロンドン"、 "LOCATION_TYPE"： "市"、 "WOEID"：44418、 https://www.metaweather.com/api/location/search/?query=london あなたはこのJSONを取得します"latt_long"： "51.506321、-0.12714"}]

初心者の方には、ちょうど良いものが得られるでしょう。 APIに接続できませんが、手動で入力すると機能します。

app.js：

var app = angular.module('weatherApp', []); 
app.controller('weatherCtrl', ['$scope', 'weatherService', function($scope, weatherService) { 
function fetchWoeid(city) { 
    weatherService.getWoeid(city).then(function(data){ 
     $scope.place = data; 
    }); 
} 

fetchWoeid('london'); 

$scope.findWoeid = function(city) { 
    $scope.place = ''; 
    fetchWoeid(city); 
}; 
}]); 

app.factory('weatherService', ['$http', '$q', function ($http, $q){ 
function getWoeid (city) { 
    var deferred = $q.defer(); 
    $http.get('https://www.metaweather.com/api/location/search/?query=' + city) 
     .success(function(data){ 
      deferred.resolve(data); 
     }) 
     .error(function(err){ 
      console.log('Error retrieving woeid'); 
      deferred.reject(err); 
     }); 
    return deferred.promise; 
} 

return { 
    getWoeid: getWoeid 
}; 
}]);

のindex.html：

<!DOCTYPE html> 
<html ng-app="weatherApp"> 

<head> 
<meta charset="utf-8" /> 
<title>Weather App</title> 
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
<script>document.write('<base href="' + document.location + '" />');</script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script data-require="[email protected]*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="app.js"></script> 
</head> 

<body ng-controller="weatherCtrl"> 
<form> 
<div class="form-group"> 
    <input class="form-control" type="text" ng-model="city" placeholder="e.g. london" /> 
    <input class="btn btn-default" type="submit" value="Search" ng-click="findWoeid(city)" /> 
</div> 
</form> 
<p ng-show="city">Searching the forecasts for: {{city}}</p> 
<div> 
<h1>WOEID is: {{ place }}</h1> 
<a ng-click="findWeather('london'); city = ''">reset</a> 
</div> 
</body> 

</html>

出典

2016-11-20 Chezi Zarur

あなたがクロスオリジンの問題が発生した表示されます。 MetaweatherがJSONPをサポートしているようには見えないので、これは少し複雑です。プロキシをサポートできるサーバーを介してページを実行する必要があります。このような例の1つはhttps://www.npmjs.com/package/cors-anywhereです。私はこれをしようとします

$http.get('http://localhost:8080/https://www.metaweather.com/api/location/search/?query=' + city)

出典

2016-11-20 19:28:48

：あなたはデフォルトを使用してこれを設定した場合、その後にあなたのAJAX呼び出しを変更します。ありがとう –

metaweather APIからangularjsページへのデータの取得

答えて

関連する問題